表單數據發佈到同一頁

Question

表單發佈到同一頁 您好我正在使用jquery，但問題是我無法加載部分頁面上提交像這樣的按鈕！

我有以下形式

<form name="loginform" id="loginform"> 
<input type="text" name="isname" id="isname"> 
<select name="hi" id="hi"> 
<option value=1">Yes</option> 
<option value=1">No</option> 
</select> 
<input type="submit" name="button" id="button" value="Submit"> 
</form> 

現在我關心的是，當我填寫的數據，並單擊提交按鈕，我有以下

剛下的形式和我聲明希望提交應加載數據在下表中有id「loaddata」和頁面不應刷新

謝謝

---

好吧，我試圖AJAXify形式：

但它仍然給我看什麼！

使用id =「loaddata」>是在同一頁上，並在其內部做我需要包括像我在哪裏做處理

Answer 1

任何文件，你可以AJAXify形式表：

$(function() { 
    $('#loginform').submit(function(evt) { 
     evt.preventDefault(); 
     $.ajax({ 
      url: this.action, // make sure you set an action attribute to your form 
      type: 'POST', 
      data: $(this).serialize(), 
      success: function(result) { 
       $('#loaddata').html(result); 
      } 
     }); 
    }); 
}); 

現在當表單被提交時，它會發送一個AJAX請求給給定的服務器端動作，並將結果注入到#loaddata容器中。

Answer 2

<form name="loginform" id="loginform"> 
<input type="text" name="isname" id="isname"> 
<select name="hi" id="hi"> 
<option value=1">Yes</option> 
<option value=1">No</option> 
</select> 
<input type="submit" name="button" id="button" value="Submit"> 
</form> 

使用jQuery ajax張貼形式並加載其中使用append，appendTo或after

$(function(){ 
$("#button").click(function(e){ 
    e.preventDefault(); //prevent the default submission of the form 
    $.ajax({ 
    url:'/path/to/server.php',//or an ActionResult what ever server side you are using 
    data:{data:$("#loginform").serialize()}, 
    type:'POST', 
    success:function(response){//success event handler, fires in case of success of ajax request 
    $("#loaddata").append(response); 
    }, 
    error:function(jxhr){ //error handler, fires if some error occurs 
    console.log(jxhr.responseText); 
    } 
    }); 
}); 
});