简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > button类型对ajax post 表单的影响
Blogger Information
Blog 33
fans 0
comment 2
visits 41991
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
button类型对ajax post 表单的影响
hanyufeng的博客
Original
975 people have browsed it

说明：

页面中有一个form，一个button按钮，尝试以ajax方式无刷新提交表单。

页面代码为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>xhr对象</title>
</head>
<body>
<!--用之前的登陆表单讲解-->
<h3>用户登陆</h3>
<form action="check.php" method="post">
    <p>用户名: <input type="text" name="userName" placeholder="不少于8位"></p>
    <p>密&nbsp;&nbsp;码: <input type="password" name="password" placeholder="不少于6位"></p>
    <button type="button">提交</button>
</form>
</body>
</html>

ajax代码为：

<script>
    //要点:将表单的提交行为交给一个js脚本来处理,这时该脚本充当了客户端的角色,因为这个脚本也可以送一个请求
    //获取提交按钮
    var submit = document.getElementsByTagName('button')[0]

    //给该提交按钮添加点击事件
    submit.onclick = function () {
        //1.创建ajax对象
        var xhr = new XMLHttpRequest()
        //2.用onreadystatechange事件检测客户端准备状态
        xhr.onreadystatechange = function () {
            //如果客户端请求状态等于4,并且服务器端http响应状态为200,则表示请求成功
            if (xhr.readyState == 4 && xhr.status == 200) {
                //执行DOM操作
                alert('返回')
            }
        }

        //3. 调用 open()方法来初始化一个客户端的ajax请求
        xhr.open('post', 'check.php', true)

        //4. 设置头信息,将内容类型设置为表单提交方式
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')

        //5. 以表单数据为参数,将请求发送到服务器端处理
        var data = serialize(document.forms[0])
//        var data = "userName=admin&password=111";
        xhr.send(data)
    }
</script>

PHP文件代码为：

<?php
//测试是否获取到了数据
print_r($_POST);

测试一：button类型为button

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

代码报错：serialize is not defined（serialize 不是js原生函数，执行到此处报错）

1.png

serialize 的问题另说，报错说明，ajax部分的代码是被执行了。

另外，日志中没有XMLHttpRequest，说明ajax并没有成功提交。

整个页面也没有刷新。

测试二：button类型改为submit（不写类型默认为submit）

<button>提交</button>

页面跳到了check.php文件，显示出了表单内容：

2.png

分析：仍然报错，另外也没有XMLHttpRequest日志，说明ajax并没有成功提交

但是，跳转到了php页面，也显示出了表单数据。

既然ajax没有成功提交表单，那就是由button提交了表单。


小结：

页面中有form时，如果要用button 的onclick事件，Ajax无刷新提交表单，应当设置button的类型为"button"，

即：

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

或者，使用其它元素绑定合适的事件来提交。

serialize 序列化表单的问题是另外的情况，这里不做讨论。

Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！