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

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

下面小编就为大家带来一篇纯javascript的ajax实现php异步提交表单的简单实例。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

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

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

实现如下(本例用POST方式提交,用php作为服务器脚本)

HTM L文件:test

    
Username:

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才能准确地获取返回的信息。

以上这篇纯javascript的ajax实现php异步提交表单的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持易知道|edz.cc。

以上就是纯javascript的ajax实现php异步提交表单的简单实例的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读

    新闻人人网将提交IPO上市在今年六月

    新闻人人网将提交IPO上市在今年六月,,根据汤姆逊路透社IFR,中国社会娱乐网站千年橡互动计划在今年上半年在美国上市,募资5亿美元。 据了解,

    虾类安装经验分享!

    虾类安装经验分享!,,虾类安装经验分享: 1,机箱的电源光盘应该接近代理价格,而内存和硬盘的价格是在互联网上找到的即时价格。主板套件,视频卡

    为什么WPS表单总是不打开

    为什么WPS表单总是不打开,,为什么WPS表格总是打不开??百度知道为您找到了6条优质回答span>a,type:cluster">很有可能文件已经损坏。恢复

    电脑wifi共享密码|电脑wifi密码分享

    电脑wifi共享密码|电脑wifi密码分享,,1. 电脑wifi密码分享打开设置,点击蜂窝网络,开启蜂窝数据按钮,个人热点,开启允许其它人加入按钮,点击无线

    ppt快捷键分享|ppt快捷播放PPT快捷键

    ppt快捷键分享|ppt快捷播放PPT快捷键,,1. ppt快捷播放PPT快捷键1.最基本的快捷键F5,从第一张幻灯片开始放映ppt。2.CTRL+P,激活”激光笔“功

    laravel-admin|自定义表单与验证

    laravel-admin|自定义表单与验证,表单,场景,场景:很多时候,由于我们业务场景比较特殊,需要自定义表单,然后框架给我提供了对应表单组建!案列:以

    真棒分享一些提示计算机BIOS

    真棒分享一些提示计算机BIOS,,一、BIOS概念 BIOS(基本输入输出系统)是一组固化到计算机主板上ROM芯片的程序。它的主要功能是提供最基本的、