采用 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> <scripttype="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><labelfor="name">姓名：</label> <inputid="name"name="name"type="text"/> </p> ?? <p><labelfor="password">密碼：</label> <inputid="password"name="password"type="password"/> </p> ?? <spanid="tishi"></span> <p><inputid="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

總結

以上是生活随笔為你收集整理的PHP jQuery Ajax 无刷新表单提交实例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。