jquery gửi biểu mẫu và sau đó hiển thị kết quả trong div hiện có

Question

Tôi có một biểu mẫu nhập văn bản đơn giản khi được gửi, cần tìm nạp tệp php (chuyển đầu vào tệp) và sau đó lấy kết quả (chỉ một dòng văn bản) và đặt nó trong một div và mờ dần rằng div vào chế độ xem.

Dưới đây là những gì tôi có bây giờ:

<form id=create method=POST action=create.php> 
<input type=text name=url> 
<input type="submit" value="Create" /> 

<div id=created></div> 

Những gì tôi cần là kết quả của create.php?url=INPUT, để được tự động nạp vào div gọi created.

Tôi có tập lệnh dạng jquery, nhưng tôi không thể làm cho nó hoạt động đúng. Nhưng tôi có thư viện được tải (tệp).

Answer 1

Mã này nên thực hiện. Bạn không cần plugin Mẫu cho một cái gì đó đơn giản như này:

$('#create').submit(function() { // catch the form's submit event 
    $.ajax({ // create an AJAX call... 
     data: $(this).serialize(), // get the form data 
     type: $(this).attr('method'), // GET or POST 
     url: $(this).attr('action'), // the file to call 
     success: function(response) { // on success.. 
      $('#created').html(response); // update the DIV 
     } 
    }); 
    return false; // cancel original event to prevent form submitting 
}); 

Answer 2

Bạn phải sử dụng AJAX để đăng biểu mẫu nếu bạn không muốn trang được làm mới.

$('#create').submit(function() { 
    $.post('create.php', $('#create').serialize(), function (data, textStatus) { 
     $('#created').append(data); 
    }); 
    return false; 
}); 

Answer 3

này cũng làm việc cho tập tin tải lên

$(document).on("submit", "form", function(event) 
{ 
    event.preventDefault(); 

    var url=$(this).attr("action"); 
    $.ajax({ 
     url: url, 
     type: 'POST', 
     dataType: "JSON", 
     data: new FormData(this), 
     processData: false, 
     contentType: false, 
     success: function (data, status) 
     { 
      $('#created').html(data); //content loads here 

     }, 
     error: function (xhr, desc, err) 
     { 
      console.log("error"); 

     } 
    });   

});