AJAX提交表单数据实例分析

2024-10-28 09:37:55

本文实例讲述了AJAX提交表单数据的方法。分享给大家供大家参考。具体如下：

var TINY={};
TINY.ajax = function() {
 return {
   /**
   * @param string type 请求类型,post,get（目前只实现了这两种）
   * @param strng url 请求的地址
   * @param object data 当使用post请求时的请求参数，ex: data=> {name:'adam'}
   * @param function callback 成功返回时的回调函数
   */
  call : function(type, url, data, callback) {
   var xhr = window.XMLHttpRequest ? new XMLHttpRequest : new ActiveXObject('Microsoft.XMLHTTP');// for ie
   xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
     callback.call(this, xhr.responseText);
    }
   }
   switch (type.toUpperCase()) {
   case 'POST':
    xhr.open('POST', url, true);
    // 这句比较重要
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    var formData = '';
    for ( var i in data) {
     formData += i + '=' + data[i] + '&';
    }
    xhr.send(formData);
    break;
   default:
    xhr.open('GET', url, true);
    xhr.send(null)
    break;
   }
  }
 }
}();

遍历表单各元素，将参数值组织成JSON格式

这里对CheckBox复选框做了特殊处理，后台接收到的该值为所有复选框值用逗号的拼接

function serialForm(form){
 var e = form.elements;
 var ht = new Array();
 var checkbox = new Array();
 for(var i = 0; i < e.length; i++) {
  if(e[i].type=="checkbox"){
   if(e[i].checked){
    if(checkbox[e[i].name] != null) checkbox[e[i].name].push(e[i].value);
    else checkbox[e[i].name] = [e[i].value];
   }
  } else {
   ht.push(e[i].name+":'"+e[i].value+"'");
   ht.push(",");
  }
 }
 for (var ddd in checkbox ){
  ht.push(ddd + ":'" + checkbox[ddd] + "'");
  ht.push(",");
 }
 ht.push("nt:0");
 return eval('({' + ht.join("") + '})');
};

AJAX的调用：

TINY.ajax.call('post', 'listfrom.do', serialForm(frm), function(data){
  var ret = eval('('+data+')');
  if(ret.errid==0){
   alert(ret.text);
   window.location.reload();
  }
  else{
   alert(ret.text);
  }
});

谈到服务器端返回的JSON格式数据，支持如下格式

String str = "[{\"mailAddr\":\"edison@163.com\"}, {\"mailAddr\":\"jay@263.com\"}]";
response.setContentType("application/json;charset=UTF-8");
response.getWriter().write(str);

前端调用

function show(){
 $.post("listmail.do", {"name" : "John"}, function(data){
  for(var i = 0; i < data.length; i++){
   alert(data[i].mailAddr);
  }
 }, "json");
}

希望本文所述对大家的Ajax程序设计有所帮助。

防止重复发送Ajax请求的解决方案

在页面中有多个按钮,点击该按钮可以异步的去服务端读取数据,然后在前端将数据展示出来. 每个按钮点击请求的页面都是同一个,但是请求的参数不同,所以返回的内容就不同. 在连续点击多个按钮的时候就会发出多个异步请求.那么根据请求返回的快慢(因为不同按钮参数不同,返回内容不同,所以会有快慢之分),数据会依次的展示出来,那么就会出现一个先点击的按钮,由于他请求的数据量比较大,导致数据被后显示出来. 一.问题解决解决这种问题有两种方式: 1.当连续进行多个请求,并且请求的url地址相同时.放弃前面的所有请
防止ajax重复请求的方法(GET和POST)

复制代码代码如下: /* 防止ajax重复请求的GET和POST方法 */ jQuery.extend({ getx:function(url,data,callback,sender){ var params={url:url,data:null,callback:null,sender:null}; for(var i=1;i<arguments.length;i++){ if(arguments[i]!=null){ var ptype=typeof(arguments[i]); if(
AJAX避免用户重复提交请求实现方案

在使用AJAX(jQuery)异步请求数据时,为了避免因某些原因用户同时多次点击按钮,提交重复的请求,我们需要禁用请求提交按钮. 重点:jQuery的 attr 和 removeAttr 两个函数,主要是元素button的disabled属性. Demo: 复制代码代码如下: <body> <a class="disabled">Button disabeld</a> <a class="abled">Butt
PHP中如何防止外部恶意提交调用ajax接口

我们自己网站写好的ajax接口,如果给自己用,那就限定一下来路域名,判断一下来路即可. 注意:将www.jb51.net替换成你自己的域名. 复制代码代码如下: //判断来路 if(!isset($_SERVER['HTTP_REFERER']) || !stripos($_SERVER['HTTP_REFERER'],'www.jb51.net')) { echo 'cann`t access'; exit(); }
ajax 防止用户反复提交的2种解决方案

可在服务器端加载方法: 复制代码代码如下: private void OnLoading() { System.Text.StringBuilder sb = new System.Text.StringBuilder(); sb.Append(" function pageLoad(){var manager = Sys.WebForms.PageRequestManager.getInstance(); "); sb.Append(" manager.add_begin
AJAX提交表单数据实例分析

本文实例讲述了AJAX提交表单数据的方法.分享给大家供大家参考.具体如下: var TINY={}; TINY.ajax = function() { return { /** * @param string type 请求类型,post,get(目前只实现了这两种) * @param strng url 请求的地址 * @param object data 当使用post请求时的请求参数,ex: data=> {name:'adam'} * @param function callback 成
thinkPHP5 ajax提交表单操作实例分析

本文实例讲述了thinkPHP5 ajax提交表单操作.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script> <
Ajax 提交表单数据到入库的全盘操作流程分享

*******php项目中当我们要对数据库进行写入操作时,有时会因为代码没有做防sql注入工作,导致各种不可预知的错误******* 1,index.htm 这是一个很简单的注册页面l 我这是以ajax形式提交数据复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt
jquery ajax提交表单数据的两种方式

之前实现AJAX使用Javascript脚本一个一个敲出来的,很繁琐.学习Jquery之后就感觉实现AJAX并不是那么的困难了,当然除了Jquery框架外还有其它的优秀框架这里我就着重说下比较流行的Jquery.Jquery AJAX提交表单有两种方式,一是url参数提交数据,二是form提交(和平常一样在后台可以获取到Form表单的值).在所要提交的表单中,如果元素很多的话建议用第二种方式进行提交,当然你要是想练练"打字水平"的话用第一种方式提交也未尝不可,相信开发者都不想费白劲吧!
jquery ajax提交表单数据的两种实现方法

之前实现AJAX使用Javascript脚本一个一个敲出来的,很繁琐.学习Jquery之后就感觉实现AJAX并不是那么的困难了,当然除了Jquery框架外还有其它的优秀框架这里我就着重说下比较流行的Jquery.Jquery AJAX提交表单有两种方式,一是url参数提交数据,二是form提交(和平常一样在后台可以获取到Form表单的值).在所要提交的表单中,如果元素很多的话建议用第二种方式进行提交,当然你要是想练练"打字水平"的话用第一种方式提交也未尝不可,相信开发者都不想费白劲吧!
jQuery使用$.ajax提交表单完整实例

本文实例讲述了jQuery使用$.ajax提交表单的方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/199
jQuery ajax中使用serialize()方法提交表单数据示例

jQuery ajax中数据以键值对(Key/Value)的形式发送到服务器,使用ajax提交表单数据时可以使用jQuery ajax的serialize() 方法表单序列化为键值对(key1=value1&key2=value2-)后提交.serialize() 方法使用标准的 URL-encoded 编码表示文本字符串.下面是使用serialize()序列化表单的实例: 复制代码代码如下: $.ajax({ type: "POST", url: ajaxCallU
Ajax提交表单并接收json实例代码

需求: 实现点击按钮后,数据以表单形式提交至服务器,并接收来自服务器的返回数据.过程中页面不刷新. html代码 <html xmlns="http://www.w3.org/1999/xhtml"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="https://cdn.bootcss.com
Jquery中ajax提交表单几种方法(get、post两种方法)

在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$( 表单ID) serialize();就行了,下面我来介绍两个提交表单数据的方法.$get方式提交表单get() 方法通过远程HTTP ,下面我来介绍两个提交表单数据的方法. $get方式提交表单 get() 方法通过远程 HTTP GET 请求载入信息格式 $(selector).get(url,data,success(response,status,xhr),dataType
yii框架表单模型使用及以数组形式提交表单数据示例

按Yii文档里的描述,Yii在处理表单的一般过程是: 创建表单对应的模型类,设置字段验证规则创建表单提交对应的action,处理提交的内容在视图中创建表单form在刚刚的一个小项目里,想使用ajax提交表单信息并验证保存,又不想用隐藏iframe来做无刷新提交,并且action中能够用到模型类的校验方法,就想到使用表单数组提交的方式,举个例子: form代码: 复制代码代码如下: <form action='' method='post' name='form_test'> <i

AJAX提交表单数据实例分析

相关推荐

随机推荐