PHP jQuery Ajax 无刷新表单提交实例

采用 PHP 为后台，前端使用强大的 jQuery 库，可以很快写一个无刷新的表单实例。

整个过程分为两部分，一部分是 HTML 和 JS 文件，另一部分是 PHP 代码，返回服务器的响应。

HTML 代码如下，鉴于可移植性，没有写全 HTML 的标记。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

<? php header('Content-Type:text/html; charset = utf -8'); ?>    < script  type = "text/javascript" src = "http://code.jquery.com/jquery.min.js" ></ script > < script type = "text/javascript" > $(function() {      $("#subbtn").click(function() {          var params = $('input').serialize();          var url = "你的服务器端 php";             $.ajax({              type: "post",              url: url,              dataType: "json",              data: params,              success: function(msg){                  var tishi = "您提交的姓名为：" + msg.name +                  "< br /> 您提交的密码为：" + msg.password;                  $("#tishi").html(tishi);                  $("#tishi").css({color: "green"});              }          });      });    });    </ script > < p >< label for = "name" >姓名：</ label > < input id = "name" name = "name" type = "text" /> </ p >    < p >< label for = "password" >密码：</ label > < input id = "password" name = "password" type = "password" /> </ p >    < span id = "tishi" ></ span > < p >< input id = "subbtn" type = "button" value = "ajax 测试" /></ p >

服务器 PHP 代码如下

1 2 3

<?php    echo json_encode( $_POST );

本文原始链接地址： http://yungbo.com/sites/jquery-ajax-php-submit-form-without-refresh-an-instance-of.html
作者： IT不倒翁 http://yungbo.com/
版权：CC BY-NC-SA 3.0