php通过ajax异步提交表单

2017年7月25日 462 次阅读 2 条评论

普通的表单提交,当前页面会被刷新或者跳转到新页面。通过ajax提交,可以在不刷新当前页面的情况下向服务器提交表单,或者将返回的信息显示在当前页面而不需要刷新。

ajax

一点小概念:

  • AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
  • AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
  • AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。

完成ajax异步提交表单需要三部分的构成:两段js代码、一个表单、一个服务端接收表单数据的页面

本例完成功能:index.html通过一段js代码向服务端demo.php提交表单,并将demo.php的结果返回到index.html页面。(全程index.html页面不刷新)

JS代码

<head>
<script src="./jquery-2.0.3.min.js"></script>   <!--jquery库必须添加-->
<script type="text/javascript">
$(function() {
    $("#submit").click(function(){
        $.ajax({
            url:'demo.php',
            type:"POST",
            data:$('#form').serialize(),
            success: function(kdNum) {
                $("#result").html(kdNum);
            }
        });
    });
});
</script>
</head>

html表单

<body>
<form id="form">
    <input name="kdNum" type="text">
    <input type="button" value="提交" id="submit">
</form>
<div id="result" >这是本页面的初始文本</div>    <!--返回的文本将显示在本div标签内-->
</body>

demo.php

<?php
 echo "[demo]:This is test:".$_POST["kdNum"];
?>

本代码的一个例子

提交前:

1

提交后:2

测试文件

 

鸿璨

恕自己一过,则万过由之而生。

  1. 婚姻生活说道:

    用了个主题好像有ajax
    感觉打开超级慢,查询发现一大段 加载不知道怎么去掉

    1. BIUKO说道:

      对编程有点了解的话,可以尝试找一下问题的原因。

发表评论

在发表评论前请确认您的言论中没有违反中国各项法律、法规和违背社会道德的内容。任何无意义的留言内容都会被直接删除。