ajax中如何实现异步提交表单

ajax中很重要的一个功能就是实现表单的不刷新提交,现在我们利用jquery和php实现这个功能
  首先我们写一个表单,我们命名为ajaxform.html,表单的代码如下:
  

用户名:


邮 件:


性     别: 男






下面加了一个id为box的div,用来放待会接受到的数据,将表单提交到user.php中去,user.php的代码如下:
 echo $_POST['email'].'-'.$_POST['user'].'-'.$_POST['sex'];
?>
只需要将传递来的数据输出就行,
接下来我们写jq代码,用来实现ajax,jq的代码如下:

$(function(){

$('form input[type=button]').click(function(){
$.ajax({
type:"POST",
url:'user.php',
data:$('form').serialize(),
success:function(response,status,xhr){
$("#box").html(response);
}
});
});
});

其中传递的数据是表单提交的数据,我们利用jq中的serialize()函数进行封装(可以减少代码量,也不容易出错),在回调函数中将传递过来的数据加到div中去。

结果如下:

点击提交之后,表单中的数据被加到div中,这样我们就实现了表单的不刷新传递数据

你可能感兴趣的:(ajax)