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

ajax中很重要的一个功能就是实现表单的不刷新提交，现在我们利用jquery和php实现这个功能

  首先我们写一个表单，我们命名为ajaxform.html,表单的代码如下：

  <form>

用户名：<input type="text" name="user"/>

</br>

邮　件：<input type="text" name="email"/>

</br>

性     别： 男<input type="radio" name = "sex" value="男"/>

女<input type="radio" name = "sex" value="女"/>

<input type="button" value="提交"/>

</form>

<div id="box">

</div>

下面加了一个id为box的div，用来放待会接受到的数据，将表单提交到user.php中去，user.php的代码如下：

<?php

 echo $_POST['email'].'-'.$_POST['user'].'-'.$_POST['sex'];

?>

只需要将传递来的数据输出就行，

接下来我们写jq代码，用来实现ajax，jq的代码如下：

<script type="text/javascript">

$(function(){

$('form input[type=button]').click(function(){

$.ajax({

type:"POST",

url:'user.php',

data:$('form').serialize(),

success:function(response,status,xhr){

$("#box").html(response);

}

});

});

});

</script>

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

结果如下：



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