Nhắm mục tiêu khung nội tuyến bằng Bài đăng HTML với jQuery

Question

Nếu tôi đang sử dụng jQuery hoặc JavaScript để thực hiện bài đăng, làm cách nào để tôi có thể làm cho khung nội tuyến nhắm mục tiêu iframe thay vì trang hiện tại?

jQuery.post( 
    url, 
    [data], 
    [callback], 
    [type] 
) 

Đó là định dạng của bài đăng jQuery, có vẻ như không có bất kỳ nơi nào để chỉ định mục tiêu như có trong thẻ <form>.

Bất kỳ ý tưởng nào?

Answer 1

Có thể bạn đang thiếu điểm của yêu cầu AJAX - tại sao bạn đang cố gắng chỉ định "mục tiêu" của yêu cầu không đồng bộ? Điều này không có nghĩa là toàn bộ điểm của AJAX là yêu cầu từ máy chủ được gửi trở lại Javascript, không tải lại trang hoặc đích HTML.

Nếu bạn muốn tải các kết quả của yêu cầu vào một khung nội tuyến, bạn có thể làm:

$.post('myurl', function(data) { 
    $('#myframe').html(data); 
}, 'html'); 

Answer 2

Bạn đang bị mất điểm của AJAX. Nếu bạn muốn đăng nội dung nào đó lên khung nội tuyến, bạn có thể làm điều này bằng một biểu mẫu đơn giản, được đăng bởi JavaScript hoặc theo cách thông thường: nút gửi.

Answer 3

Bạn có thể làm điều này thông qua một hình thức thông thường:

<form action="targetpage.php" method="post" target="iframename" id="formid"> 
    <input type="hidden" name="foo" value="bar" /> 
</form> 

Sau đó bạn có thể sử dụng jQuery để gửi biểu mẫu:

$("#formid").submit(); 

Answer 4

Bạn có thể giải quyết được không-form-phép-trong-một -xác định vấn đề bằng cách tự động tạo biểu mẫu và gắn nó vào cơ thể. Vì vậy, bạn sẽ làm một việc như sau:

$().ready(function() { 
    $('body').append('<form 
     action="url" 
     method="post" 
     target="iframename" 
     id="myspecialform"> 
     <input type="hidden" name="parameter" value="value" /> 
     </form>'); 
}); 

Điều đó tạo biểu mẫu cập nhật iframe của bạn bên ngoài biểu mẫu chính bao gồm mọi thứ khác trên trang. Sau đó, chỉ cần gọi nó là Josh đề nghị: $('#myspecialform').submit();.

Answer 5

Dưới đây là những gì tôi đã làm để giải quyết vấn đề có biểu mẫu trong biểu mẫu trên trang asp.net khi tôi cần gửi dữ liệu đến trang từ xa thông qua biểu mẫu lý tưởng bằng AJAX/jQuery.

1. Tôi tạo ra các biến để nắm bắt những tên hình thức asp.net, mục tiêu, hành động, phương pháp vv

2. Tôi cho rằng thông tin từ mẫu tại các biến và sau đó đã thay đổi mẫu tự sử dụng jQuery để làm những gì tôi cần nó để làm.

3. Sau đó, tôi đã đăng biểu mẫu qua AJAX (vì tôi cần một biểu mẫu để đăng lên một trang riêng biệt để trang khác có thể NHẬN thông tin).

4. Cuối cùng, tôi đã đổi biểu mẫu asp.net trở lại theo cách để phần còn lại của trang có thể hoạt động chính xác.

Điều này dường như đã giải quyết được nhu cầu của tôi về một giải pháp tương tự.

Answer 6

Tôi biết câu hỏi này là cũ, nhưng đây là cách tôi đã làm nó trên ASP.Net (C#) bằng cách sử dụng jQuery.

//Create the form in a jQuery object 
$("<form action='/FormPostTo.aspx' method='post' target='nameofframe'></form>") 
    //Get the value from the asp textbox with the ID txtBox1 and POST it as b1 
    .append($("<input type='hidden' name='b1' />").attr('value',$('#<%= txtBox1.ClientID %>').val())) 
    //Get the value from the asp textbox with the ID txtBox2 and POST it as b2 
    .append($("<input type='hidden' name='b2' />").attr('value',$('#<%= txtBox2.ClientID %>').val())) 
    //Add the form to the body tag 
    .appendTo('body') 
    //Submit the form which posts the variables into the iframe 
    .submit() 
    //Remove the form from the DOM (so subsequent requests won't keep expanding the DOM) 
    .remove(); 

Chỉ cần một lưu ý nhanh chóng: Tôi đã làm các thẻ đầu vào như thế chứ không phải là concatenating chúng, trong trường hợp giá trị của textbox có báo giá (') trong đó. Nếu bạn nối nó vào, nó sẽ làm hỏng HTML và nó sẽ không phân tích cú pháp chính xác.

Ngoài ra, điều này sẽ xóa biểu mẫu khỏi DOM sau khi nó được sử dụng để bạn không điền DOM với các phần tử biểu mẫu nếu bạn đăng lên iFrame nhiều lần.

Một thay đổi nhỏ mà bạn có thể thực hiện, là tạo phần tử biểu mẫu nếu nó không tồn tại và sau đó chỉ tham chiếu nó bằng ID nếu nó đã tồn tại và sử dụng lại nó.

Answer 7

đây là cách tôi đã làm nó trong javascript với html đơn giản:

var form=$("<form/>").attr({ 
    method: "post", 
    action: "iframe.php", 
    target: "list_frame" 
}); 
form.append($("<input/>").attr({name:"field1",value:0})); 
form.append($("<input/>").attr({name:"field2",value:1})); 
form.append($("<input/>").attr({name:"field3",value:2})); 
form.append($("<input/>").attr({name:"field4",value:3})); 
form.append($("<input/>").attr({name:"field5",value:4})); 
$("body").append(form); 
form.submit();