实现点击按钮后,数据以表单形式提交至服务器,并接收来自服务器的返回数据。过程中页面不刷新。本文主要介绍了Ajax提交表单并接收json的实例代码,非常不错,具有参考借鉴价值,需要的朋友可以参考下,希望能帮助到大家。
html代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <html xmlns= "http://www.w3.org/1999/xhtml" >
<meta http-equiv= "Content-Type" content= "text/html; charset=UTF-8" >
<script src= "https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js" ></script>
<script src= "./testajaxjs.js" ></script>
<head>
</head>
<body>
<form id= "form1" >
<p>xingming:<input type= "text" name= "xingming" /></p>
<p>nianling:<input type= "text" name= "nianling" /></p>
</form>
<button type= "button" id= "mybt" onclick= "mysubmmit()" >
ajax提交
</button>
</body>
</html>
|
登录后复制
js代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | function mysubmmit(){
$.ajax({
type: "POST" ,
url: "testajaxend.php" ,
data: $('#form1').serialize(),
async: false,
success: function (databack){
console.log(databack);
},
error: function (request){
console.log( "shibaile" );
}
});
}
|
登录后复制
后端php代码
1 2 3 4 5 6 7 | <?php
$name = $_POST ['xingming'];
$age = $_POST ['nianling'];
$myarray = array ( "name" => $name , "age" => $age );
$myjson = json_encode( $myarray );
echo $myjson ;
?>
|
登录后复制
相关推荐:
jquery实现ajax提交表单的两种方法
Ajax 技术一 ajax提交表单 jquery ajax教程 js ajax
php HTML无刷新提交表单 form表单提交 ajax提交表单 js提交表
以上是Ajax提交表单并接收json方法的详细内容。更多信息请关注PHP中文网其他相关文章!