AJAX实现异步提交表单

最新推荐文章于 2021-10-12 21:22:36 发布
最新推荐文章于 2021-10-12 21:22:36 发布
阅读量100 收藏
点赞数
文章标签： Ajax PHP Microsoft HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xindongyinfu/article/details/83396594
版权
目的 : 不刷新网页完成表单提交和动态验证

方法 : 在表单页点击submit后在当前页使用AJAX提交表单数据,通过一个处理表单文件处理后.在当前页做提交后的操作,
ajax.js 

var XMLHttp = {
    _objPool: [],

    _getInstance: function ()
    {
        for (var i = 0; i > this._objPool.length; i ++)
        {
            if (this._objPool[i].readyState == 0 || this._objPool[i].readyState == 4)
            {
                return this._objPool[i];
            }
        }

        // IE5中不支持push方法
        this._objPool[this._objPool.length] = this._createObj();

        return this._objPool[this._objPool.length - 1];
    },

    _createObj: function ()
    {
        if (window.XMLHttpRequest)
        {
            var objXMLHttp = new XMLHttpRequest();

        }
        else
        {
            var MSXML = [’MSXML2.XMLHTTP.5.0′, ‘MSXML2.XMLHTTP.4.0′, ‘MSXML2.XMLHTTP.3.0′, ‘MSXML2.XMLHTTP’, ‘Microsoft.XMLHTTP’];
            for(var n = 0; n < MSXML.length; n ++)
            {
                try
                {
                    var objXMLHttp = new ActiveXObject(MSXML[n]);
                    break;
                }
                catch(e)
                {
                }
            }
         }         

        // mozilla某些版本没有readyState属性
        if (objXMLHttp.readyState == null)
        {
            objXMLHttp.readyState = 0;

            objXMLHttp.addEventListener(”load”, function ()
                {
                    objXMLHttp.readyState = 4;

                    if (typeof objXMLHttp.onreadystatechange == “function”)
                    {
                        objXMLHttp.onreadystatechange();
                    }
                }, false);
        }

        return objXMLHttp;
    },

    // 发送请求(方法[post,get], 地址, 数据, 回调函数 , 异步)
    sendReq: function (method, url, data, callback , XMLHttpbool)
    {
     if(!XMLHttpbool) XMLHttpbool = true;
        var objXMLHttp = this._getInstance();

        with(objXMLHttp)
        {
            try
            {
                // 加随机数防止缓存
                if (url.indexOf(”?”) > 0)
                {
                    url += “&randnum=” + Math.random();
                }
                else
                {
                    url += “?randnum=” + Math.random();
                }

                open(method, url, XMLHttpbool);

                // 设定请求编码方式
                setRequestHeader(’Content-Type’, ‘application/x-www-form-urlencoded; charset=UTF-8′);
                send(data);
                onreadystatechange = function ()
                {
                    if (objXMLHttp.readyState == 4 && (objXMLHttp.status == 200 || objXMLHttp.status == 304))
                    {
                        callback(objXMLHttp);
                    }
                }
            }
            catch(e)
            {
                alert(e);
            }
        }
    },
 /*

* form     表单

* url   处理文件名

* func 提交后的处理方法

*/
  formSubmit : function(form , url , func){
    if(typeof form != ‘object’){
   var form = document.getElementById(form);
    }
 var ele = form.elements;
    var post = new Array();

 for(var i = 0 ; i<ele.length ;   i++ ){
    //只考虑了 <input type="text" />  其它的要加些 if ... 
    post[i] = ele[i].value;
 }
 var data = post.join(’&’);
 this.sendReq('post' , url , data , func , false);
  }
};


form.html 


<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>form</title>

<script type="text/javascript" src=''ajax.js"></script>

<script type="text/javascript">

function response(XMLHttp){

    eval(XMLHttp.responseText);

} 

function  ajaxSubmit(form){

    var url = 'action.php' ; //处理文件

    XMLHttp.formSubmit(form , url , response);

}

</script>

</head>

<body>

<form onsubmit="ajaxSubmit(this);return false;">

<input type='text' name='fieldName' />

<input type='submit' value='Submit' />

</form>

</body>

</html>


action.php 

if(isset($_POST['submit'])){
   if(正确){
      //...........入库.......
     echo 'alert("完成"); location="/'';';
     exit;
  } else{
     echo 'alert("出错");';
     exit;
  }
}else{
   //其它.... 
}
xindongyinfu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
用Ajax方法实现表单获取和异步提交
weixin_49756432的博客
06-07 742
1. Ajax简介： Asynchronous异步的 JavaScript and XML(异步的 JavaScript 和XML) 2.XML是被设计用来交换数据的。 3.表单的同步提交和异步提交： 同步：是指进程需要等待前面的进程操作执行完成后，才能执行下一步操作。 异步：是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。 当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。 4.异步实现： 1运用HTML与CSS来实现页面，表达信息...
Ajax异步提交表单
weixin_44543135的博客
03-31 1578
Ajax异步提交表单 开发工具与关键技术：VS2015, HTML5, JavaScript 作者：张金荣 撰写时间：2019 年 3月 28 日 先简单介绍一下Ajax异步提交： 异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。所谓异步加载页面就是不用在刷新整个页面的前提下异步加载部分网页更新 这是一个异步提...
使用AJAX异步提交表单的几种方式
热门推荐
下一站，幸福
04-07 3万+
这里介绍三种常用的提交方式方式一手工收集所有的用户输入，封装为大的“k1=v1&k2=v2…”键值对形式，使用$.post(url, data,fn)把数据提交给服务器$.ajax({ type:'post', url:'Notice_noTipsNotice', data:'k1=v1&k2=v2...', c
Ajax 异步提交表单
向往的那片海洋
11-15 378
异步提交表单的步骤 所谓异步提交表单，就是不再使用表单的提交按钮实现表单的提交功能，而是通过 Ajax 异步交互方式实现表单。具体实现步骤如下： 获取表单及所有表单组件对应的数据值 将所有表单组件对应的数据值拼成特定格式的字符串或是 JSON 格式数据 通过 Ajax 异步交互方式提交表单 <body> <form action="#"> <input type="text" id="name"> <input type=
异步(ajax)提交表单
weixin_44548893的博客
10-12 345
6.3.3异步(ajax)提交表单 在此使用异步提交表单是为了获取服务器响应的数据。因为我们前台使用的是html作为视图层，不能够直接从servlet相关的域对象获取值，只能通过ajax获取响应数据 6.3.4代码实现 6.3.5编写RegistUserServlet @WebServlet("/registUserServlet") public class RegistUserServlet extends HttpServlet { protected void doPost(HttpServletR
纯javascript的ajax实现php异步提交表单的简单实例
10-22
下面小编就为大家带来一篇纯javascript的ajax实现php异步提交表单的简单实例。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Ajax异步提交表单数据的说明及方法实例
09-05
对于一个典型的AJAX异步提交表单的示例，如登录页面的登录操作，我们可以看到以下步骤： 1. 用户填写表单并点击登录按钮。 2. 使用jQuery库监听登录按钮的点击事件。 3. 当按钮被点击时，阻止默认的表单提交行为，...
使用ajax异步提交表单的几种方法总结
10-20
本篇文章将总结三种常用的方法，帮助开发者实现使用Ajax异步提交表单。 **方式一：手工收集和封装数据** 这种方式需要手动获取表单中的所有用户输入，并将它们拼接成键值对的形式，如"key1=value1&key2=value2......
ajax异步提交表单
07-20
### AJAX异步提交表单知识点解析 #### 一、AJAX技术概述 AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，AJAX可以...
jquery ajax异步提交表单数据的方法
11-29
本篇文章将详细解释如何使用jQuery的`ajax`方法来实现异步提交表单，同时涵盖不包含文件和包含文件的两种情况。 ### 1. 不带文件的表单数据提交 当表单数据不包含文件时，我们可以使用`serialize()`方法将表单元素...
ajaxForm异步提交表单（含图片）
08-13
ajaxForm异步提交表单（含图片）ajaxForm异步提交表单（含图片）ajaxForm异步提交表单（含图片）
jquery异步提交form表单
04-21
NULL 博文链接：https://chenzheng8975.iteye.com/blog/1922970
Ajax异步提交form表单
R4bbit
02-03 1675
学了一个周jquery，做了一堆脑瘫动画，终于能学到能用上的东西了！ 几个注意点： form控件默认为get传值，form控件中的按钮会冲突 为什么我要用ajax异步提交？ 因为我想实现那种后端发送前端数据密码错误等类似的信息，这里就只需要提交一个用户名密码或者验证码等信息提交到后端，然后后端反馈登录信息。 HTML代码： <form class="login-form" action="" method="post"> <h1>登录</
ajax异步获取表单全部数据,Ajax异步提交表单数据的说明及方法实例
weixin_35910782的博客
08-05 665
Ajax异步提交表单数据的说明及方法实例发布于 2016-12-30 17:24:40 | 108 次阅读 | 评论: 0 | 来源: 网友投递JavaScript客户端脚本语言Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览...
js登录特效+ajax提交表单+异步刷新验证
hpugym的专栏
01-08 4912
今天成功测试一种js登录特效+ajax提交表单+异步刷新验证，登录时特效提醒，无刷新ajax提交表单，获取验证结果，跳转正式页面：废话不多说，先直接分享代码： 1、主界面index.php  加载的这两项，网上可以下载 <?php session_start(); $_SESSION['user']=null; ?> 雏出宾馆客房管理系统
同步和异步
huangweiloveyou的专栏
02-24 544
异步传输是面向字符的传输，它的单位是字符；而同步传输是面向比特的传输，它的单位是桢，它传输的时候要求接受方和发送方的时钟是保持一致的。 具体来说，异步传输是将比特分成小组来进行传送。一般每个小组是一个8位字符，在每个小组的头部和尾部都有一个开始位和一个停止位，它在传送过程中接收方和发送方的时钟不要求一致，也就是说，发送方可以在任何时刻发送这些小组，而接收方并不知道它什么时候到达。一个最明显的例子
ajax异步提交表单。
满天星
12-01 399
ajax异步提交表单有几种方法。 1，不利用表单，通过拼接字符串data 进行提交数据。此方法如果想上床图片。需要借助HTML5   FileReader 把图片转换成base64字符串通过隐藏域传值。这样有把base64字符串传到后台，base64字符串中的+会在提交的时候被转义。可以吧base64图片字符串进行加密再解密（ encodeURIComponent() ） 2,
jQuery异步提交表单（有实例）
xinghuo0007的博客
05-30 1万+
前言：我们在开发的时候，一定会使用ajax异步提交表单，在这里总结一下：前提准备：引入脚本 <!--jquery需要引入的文件--> <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.js"></script> <!--ajax提交表单需要引入jquery.form.js--> <script ty
ajax异步提交表单数据
最新发布
05-02
使用ajax异步提交表单数据可以避免页面刷新，让用户体验更加流畅。以下是一个示例代码： ```javascript $(document).ready(function() { // 监听表单提交事件 $('#myForm').on('submit', function(event) { // 阻止表单默认提交行为 event.preventDefault(); // 获取表单数据 var formData = $(this).serialize(); // 发送ajax请求 $.ajax({ url: 'submit.php', type: 'POST', data: formData, success: function(response) { // 处理服务器返回的数据 console.log(response); }, error: function(jqXHR, textStatus, errorThrown) { // 处理请求错误 console.log(textStatus, errorThrown); } }); }); }); ``` 在上面的代码中，我们首先监听了表单的提交事件，然后阻止了表单的默认提交行为。接着，我们使用`serialize()`方法获取了表单数据，并使用`$.ajax()`方法发送了异步请求。其中，`url`参数指定了请求的URL，`type`参数指定了请求的类型，`data`参数指定了请求的数据，`success`参数指定了请求成功的回调函数，`error`参数指定了请求失败的回调函数。在回调函数中，我们可以处理服务器返回的数据或者请求失败的情况。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值