纯javascript的ajax实现php异步提交表单

最新推荐文章于 2024-08-10 10:11:23 发布

老胡爱分享

最新推荐文章于 2024-08-10 10:11:23 发布

阅读量1w

点赞数

分类专栏： php 学习文章标签： WEB开发 php ajax 异步 javascript

本文链接：https://blog.csdn.net/yipiankongbai/article/details/11021619

版权

php 同时被 2 个专栏收录

57 篇文章 0 订阅

订阅专栏

学习

14 篇文章 0 订阅

订阅专栏

本文介绍了如何使用纯JavaScript实现异步提交表单，避免了使用额外库如jQuery的情况。通过示例代码展示了一个POST方式提交表单到PHP服务器脚本的过程，并强调PHP脚本在echo返回信息前不应有其他输出，以确保AJAX能正确获取响应。

摘要由CSDN通过智能技术生成

很多时候需要异步提交表单，当表单太多是时候，一个个getElementById变得很不实际

当然，jquery可以实现异步提交表单，jquery.form.js这个库貌似也挺流行

只是有时候并不想使用额外的库，所以就琢磨着自己写，用纯js来实现异步提交表单

实现如下（本例用POST方式提交，用php作为服务器脚本）

HTM L文件：test

<html>
<head>
    <script type="text/javascript" src="name_form.js"></script>
</head>
<body>
    <form action="process.php" id="ajax_form">
        Username:<input type="text" name="username" id="username"/><br>
        <input type="button" οnclick="submitForm('name_form')" value="Submit">
    </form>
    <div id="tip"></div>
</body>
</html>

JS文件：name_form.js

function createXmlHttp() {
    var xmlHttp = null;
     
    try {
        //Firefox, Opera 8.0+, Safari
        xmlHttp = new XMLHttpRequest();
    } catch (e) {
        //IE
        try {
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
     
    return xmlHttp;
}
 
function submitForm(formId) {
    var xmlHttp = createXmlHttp();
    if(!xmlHttp) {
        alert("您的浏览器不支持AJAX！");
        return 0;
    }
    
    var url = 'test.php';
    var postData = "";
    postData = "username=" + document.getElementById('username').value;
    postData += "t=" + Math.random();
    
    xmlHttp.open("POST", url, true);
    xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xmlHttp.onreadystatechange = function() {
        if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
            if(xmlHttp.responseText == '1') {
                alert('post successed');
            }
        }
    }
    xmlHttp.send(postData);
}

PHP文件：test.php

<?php
    if(isset($_POST['username']) {
        echo '1';
    }
?>

上面程序的原理是，首先用户用过在test.html文件中输入用户名信息，然后通过name_form.js文件进行ajax实现提交表单，然后在php文件中进行操作，此处只是判断用户名是否被设定，也就是说用户名是否存在，存在则输出1；另外，也可以对数据库进行操作（增，改等），然后判断操作结果，如果结果为真则输出1，在js文件中的xmlHttp.responseText中判断返回的信息，因为只是输出1，所以判断正确，此时弹出提示框，内容是'post successed'。这样就成功实现了用ajax实现php异步提交表单。

注：要保证php文件echo之前没有任何的输出，这样ajax才能准确地获取返回的信息。