表单数据发布到同一页

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); 
    } 
    }); 
}); 
});