ajax异步小实例

合集下载

AJAX案例

div 部分用于显示来自服务器的信息。

当按钮被点击时，它负责调用名为loadXMLDoc() 的函数：<html><body><div id="myDiv"><h3>Let AJAX change this text</h3></div><button type="button" onclick="loadXMLDoc()">Change Content</button></body></html>接下来，在页面的 head 部分添加一个 <script> 标签。

该标签中包含了这个loadXMLDoc() 函数：<head><script type="text/javascript">function loadXMLDoc(){.... AJAX script goes here ...}</script></head>AJAX - 创建 XMLHttpRequest 对象∙Previous Page∙Next PageXMLHttpRequest 是 AJAX 的基础。

XMLHttpRequest 对象所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用ActiveXObject）。

XMLHttpRequest 用于在后台与服务器交换数据。

这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

创建 XMLHttpRequest 对象所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建XMLHttpRequest 对象。

创建 XMLHttpRequest 对象的语法：variable=new XMLHttpRequest();老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：variable=new ActiveXObject("Microsoft.XMLHTTP");为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持XMLHttpRequest 对象。

在layui中使用form表单监听ajax异步验证注册的实例

在layui中使⽤form表单监听ajax异步验证注册的实例今天给⼤家介绍的是当下很流⾏的框架layui中的⼀个⼩案例、就是form表单监控提交并且使⽤ajax异步提交验证数据。

在layui中我们想使⽤哪个模块就要e('form',function{});这种形式要引⽤form内置模板，下⾯是HTML全部代码<!DOCTYPE html><html><head><meta charset="utf-8"><title>注册</title><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><meta name="keywords" content="雷⼩天"><meta name="description" content="雷⼩天博客-layui中使⽤form表单监听异步验证注册"><link rel="stylesheet" href="__RES__/layui/css/layui.css" rel="external nofollow" ><link rel="stylesheet" href="__RES__/css/global.css" rel="external nofollow" ></head><body><div class="fly-header layui-bg-black"><div class="layui-container"><a class="fly-logo" href="{:U('device/getinfo')}" rel="external nofollow" ><img src="__RES__/images/logo.png" alt="layui"></a><ul class="layui-nav fly-nav-user"><li class="layui-nav-item"><a class="iconfont icon-touxiang layui-hide-xs" href="user/login.html" rel="external nofollow" ></a></li><li class="layui-nav-item"><a href="{:U('device/login')}" rel="external nofollow" rel="external nofollow" >登⼊</a></li><li class="layui-nav-item"><a href="javascript::void;" rel="external nofollow" >注册</a></li></ul></div></div><div class="layui-container fly-marginTop"><div class="fly-panel fly-panel-user" pad20><div class="layui-tab layui-tab-brief" lay-filter="user"><ul class="layui-tab-title"><li><a href="{:U('device/login')}" rel="external nofollow" rel="external nofollow" >登⼊</a></li><li class="layui-this">注册</li></ul><div class="layui-form layui-tab-content" id="LAY_ucm" style="padding: 20px 0;"><div class="layui-tab-item layui-show"><div class="layui-form layui-form-pane"><form method="post"><div class="layui-form-item"><label for="L_username" class="layui-form-label">⼿机</label><div class="layui-input-inline"><input type="text" id="signuppassdata" name="phone" required lay-verify="required" autocomplete="off" class="layui-input"></div></div><div class="layui-form-item"><label for="L_username" class="layui-form-label">卡号</label><div class="layui-input-inline"><input type="text" id="cardno" name="cardno" required lay-verify="required" autocomplete="off" class="layui-input"></div></div><div class="layui-form-item"><button class="layui-btn" type="submit" lay-filter="reg" lay-submit="" id="signuppass" >⽴即注册</button></div></form></div></div></div></div></div></div><div class="fly-footer"><p>开门社区 2018 © <a href="/" rel="external nofollow" target="_blank"> 出品</a></p> <p><a href="JavaScript::void;" rel="external nofollow" target="_blank">雷⼩天博客</a></p></div><script src="__PUBLIC__/mobile/js/jquery.js"></script><script src="__RES__/layui/layui.js"></script><script>//监听提交e('form', function(){var form = layui.form;form.on('submit(reg)', function(data){// layer.msg(JSON.stringify(data.field));//弹出json格式所有表单的值var phone=data.field.phone;var cardno=data.field.cardno;if(phone.length!=11){layer.msg('请输⼊有效的⼿机号码', {icon: 2});return false;}var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;if(!myreg.test(phone)){layer.msg('请输⼊有效的⼿机号码', {icon: 2});return false;}if(cardno.length!=8){layer.msg('请输⼊有效的卡⽚内码！', {icon: 2});return false;}$.ajax({type:"POST",url:"index.php?m=Home&c=Device&a=ajax_reg",data:"phone="+phone+"&cardno="+cardno,dataType:"json",success:function(data){if(data.status=='yes'){layer.msg('注册成功！', {icon: 1});var url = "{:U('device/getinfo')}"; //成功跳转的urlsetTimeout(window.location.href=url,2000);}else{layer.msg(data.msg, {icon: 2});}},});return false;});});</script></body></html>下⾯是ajax_reg逻辑⽅⾯，这是我的业务逻辑⼤家没必要照搬，知道怎么⽤就⾏了//表单异步提交public function ajax_reg(){if(isset($_POST['phone'])&&isset($_POST['cardno'])){$roomnostr = M("userinfo")->where(array('cardno'=>$_POST['cardno']))->getField('roomno');if(!$roomnostr){echo json_encode(array('status'=>'no','msg'=>'⽆效的卡⽚内码，请联系管理员！'));exit();}$wechatinfo=$_SESSION['wechatinfo'];if(!$wechatinfo){echo json_encode(array('status'=>'no','msg'=>'页⾯已过期请重新扫码进⼊！'));exit();}$result= M("weixin")->where(array('openid'=>$wechatinfo['openid']))->field('is_signup,area_id')->find();$areaArr=explode('-',$result['area_id']);// $result=M("weixin")->getFieldByOpenid($_POST['openid'],'is_signup');if(isset($result)&&$result['is_signup']==1){//如果注册过⼀次下次只更新门区$new_area=$roomnostr;$reg=M("weixin")->where(array('openid'=>$wechatinfo['openid']))->save(array('area_id'=>$new_area));echo json_encode(array('status'=>'no','type'=>'signuppass','msg'=>'你已注册为该门区的租户，请勿重复注册！'));exit();}else{$data=array('is_signup'=>1,'phone'=>$_POST['phone'],'openid'=>$wechatinfo['openid'],'nickname'=>$wechatinfo['nickname'],'sex'=>$wechatinfo['sex'],'headimgurl'=>$wechatinfo['headimgurl'],'area_id'=>$roomnostr,'regtime'=>time(),'cardno'=>$_POST['cardno'],);$reg=M("weixin")->add($data);if($reg){echo json_encode(array('status'=>'yes','msg'=>'恭喜你，注册成功！'));}}}}以上这篇在layui中使⽤form表单监听ajax异步验证注册的实例就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

ajax--实现异步请求，接受响应及执行回调

参数类型说明url 为string（因此要⽤引号引起来）发送请求的地址type string请求的⽅式：post或get请求。

默认为get请求data Object或string发送服务器的数据，键值对，字符串或对象，这⾥post请求有此参数，get请求直接在地址处？后⾯传参即可dataTypestring后端返回给前端的数据类型，⽐如html，xml，json。

本来是string,在ajax请求时设置dataType为json，将字符串；类型变为json类型succ ess function请求成功后调⽤的回调函数，需要操作的东西⼀般在这⾥写⽤法success:function(e 这个字母e可以是其他英⽂){写内容} 注意这个（）⾥⾯的e或者说其他东西就是后端HttpResponse或者JsonResponse返回的东西，这⾥与dataType有关error function请求失败时调⽤的回调函数asyn c Boolean是否异步处理，默认为True,false为同步处理ajax--实现异步请求，接受响应及执⾏回调ajax最⼤的优点是在不重新加载整个页⾯的情况下,可以与服务器交换数据并更新部分⽹页的内容ajax指是⼀种创建交互式⽹页应⽤的⽹页开发技术，其实就是实现前后端交互。

1）ajax是异步javascript，异步的意思即⾮阻塞，就像线程，在代码运⾏到ajax请求时，它会分成两条线，⼀条线去运⾏ajax请求⾥⾯的内容，另⼀条线去运⾏主程序（即ajax请求后⾯的代码），当然我们可以因需要异步设置成同步（即在运⾏到ajax请求时，将阻塞运⾏完ajax请求后，再去运⾏ajax外，后⾯的代码）2）注意ajax请求是由jquery发起的，因此⽤于jquery代码块中。

3）执⾏相应的视图函数（这⾥是在⼀个py，php等⽂件中创建⼀个视图函数，或者class类，给这个视图函数分级设置⼀个url地址，ajax请求中的url即填写这个完整的url地址），返回json内容。

ajax中的success方法

ajax中的success方法1.引言1.1 概述概述:AJAX（Asynchronous JavaScript and XML）是一种基于前端的技术，通过使用JavaScript和XML或JSON来实现与服务器之间的异步通信。

它的出现极大地改变了Web开发的方式，使得页面能够实现动态的数据更新，无需重新加载整个页面。

在AJAX中，success方法是作为回调函数之一，用于处理异步请求成功后返回的数据。

当请求成功时，success方法会被调用，并将服务器返回的数据作为参数传递给该方法。

本文将重点介绍和探讨AJAX中的success方法，包括其使用方法、参数和常见的应用场景。

通过深入了解success方法，读者将能够更好地理解AJAX的工作原理，并能够灵活运用这一方法来处理异步请求的返回数据。

接下来的章节将依次介绍AJAX的简介以及其中的success方法，以帮助读者更好地理解和运用该方法。

本文的目的是帮助读者掌握AJAX技术中的关键概念和方法，以便能够在实际的Web开发中灵活运用AJAX 来提升用户体验和页面的性能。

在结论部分，我们将对AJAX中的success方法进行总结，并展望其在未来的应用前景。

通过对success方法的深入学习，读者将能够更好地应用这一方法来处理异步请求返回的数据，提供更好的用户体验，同时也能够更好地理解和应用AJAX技术。

1.2文章结构文章结构是指文章的组织形式和内容安排方式。

一个良好的文章结构可以使读者更容易理解和吸收文章内容，并且可以让作者更清晰地表达自己的观点和论据。

在本篇文章中，我们将按照以下结构组织内容：1. 引言1.1 概述：介绍AJAX（Asynchronous JavaScript and XML）的基本概念和作用，以及它在现代Web开发中的重要性。

1.2 文章结构：说明本篇文章的整体结构和内容安排。

1.3 目的：阐述写作本文的目的，即介绍AJAX中的success方法的作用、用法和实际应用场景。

jQuery调用AJAX异步操作超清晰教程

JQUERY AJAX异步操作详细说明AJAX 全称 Asynchronous JavaScript and XML（异步的 JavaScript 和XML）。

它并非一种新的技术，而是以下几种原有技术的结合体。

1)使用CSS和XHTML来表示。

2)使用DOM模型来交互和动态显示。

3)使用XMLHttpRequest来和服务器进行异步通信。

4)使用javascript来绑定和调用。

通过AJAX异步技术，可以在客户端脚本与web服务器交互数据的过程中使用XMLHttpRequest对象来完成HTTP请求(Request)/应答(Response)模型：1)不需要用户等待服务端响应。

在异步派发XMLHttpRequest请求后控制权马上就被返回到浏览器。

界面不会出现白板，在得到服务器响应之前还可以友好的给出一个加载提示。

2)不需要重新加载整个页面。

为XMLHttpRequest注册一个回调函数，待服务器响应到达时，触发回调函数，并且传递所需的少量数据。

“按需取数据”也降低了服务器的压力。

3)不需要使用隐藏或内嵌的框架。

在XHR对象之前，模拟Ajax通信通常使用hack手段，如使用隐藏的或内嵌的框架(<iframe>标签)。

下面介绍下AJAX中的重要对象：XMLHttpRequest。

XMLHttpRequest对象(XHR)XMLHttpRequest是一套可以在Javascript、VbScript、Jscript等脚本语言中通过http协议传送或接收XML及其他数据的一套API。

XMLHttpRequest对象首次以ActiveX对象形式在微软Internet Explorer(IE) 5中以引入。

其他浏览器制造商在认识到这一对象重要性后也纷纷实现了XMLHttpRequest对象，但是以一个本地JavaScript对象而不是作为一个ActiveX 对象实现。

而如今，由于安全性、标准等问题，微软已经在其IE 7中把XMLHttpRequest实现为一个本地JavaScript对象。

ajaxresult的success方法

ajaxresult的success方法（实用版3篇）目录（篇1）I.AJAXResult的success方法介绍A.AJAXResult的success方法的定义B.AJAXResult的success方法的作用C.AJAXResult的success方法的参数II.AJAXResult的success方法的应用场景A.异步加载数据B.动态更新页面C.减少页面加载时间III.AJAXResult的success方法的实现步骤A.引入AJAX库B.编写AJAX请求代码C.配置AJAX请求D.处理AJAX请求结果正文（篇1）AJAXResult的success方法是一种常用的AJAX请求结果处理方式，它可以在异步加载数据、动态更新页面等方面发挥重要作用。

下面我们来详细介绍一下AJAXResult的success方法的应用场景和实现步骤。

一、异步加载数据AJAX请求是一种异步加载数据的方式，它可以在不刷新页面的情况下向服务器发送请求，获取所需的数据，并将其动态地填充到页面上。

而AJAXResult的success方法则是处理AJAX请求结果的一种方式，它可以在请求成功时自动调用指定的回调函数，将获取到的数据传递给该函数进行处理。

二、动态更新页面使用AJAXResult的success方法可以实现动态更新页面的功能。

当服务器返回的数据发生变化时，通过调用该方法可以自动更新页面上的内容，使其与最新的数据保持一致。

这种方式可以大大减少页面刷新带来的延迟和卡顿现象，提高用户体验。

三、减少页面加载时间使用AJAXResult的success方法还可以有效地减少页面加载时间。

当页面上的某个数据需要从服务器获取时，如果使用传统的同步加载方式，会导致整个页面停止响应，等待数据加载完成。

目录（篇2）I.AJAXResult的基本概念II.AJAXResult的Success方法的作用III.AJAXResult的Success方法的参数IV.AJAXResult的Success方法的返回值正文（篇2）AJAXResult是一种在中实现异步数据请求的技术。

jQuery ajax - ajax() 使用方法和示例

实例通过 AJAX 加载一段文本： jQuery 代码： $(document).ready(function(){ $("#b01").click(function(){ htmlobj=$.ajax({url:"",async:false}); $("#myDiv").html(htmlobj.responseText); }); });HTML 代码： <div id="myDiv"><h2>321 导航</h2></div> <button id="b01" type="button"></button>亲自试一试定义和用法ajax() 方法通过 HTTP 请求加载远程数据。

该方法是 jQuery 底层 AJAX 实现。

简单易用的高层实现见 $.get, $.post 等。

$.ajax() 返回其创建的 XMLHttpRequest 对象。

大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。

最简单的情况下，$.ajax() 可以不带任何参数直接使用。

注意：所有的选项都可以通过 $.ajaxSetup() 函数来全局设置。

语法jQuery.ajax([settings])参数 settings描述可选。

用于配置 Ajax 请求的键值对集合。

可以通过 $.ajaxSetup() 设置任何选项的默认值。

参数 options 类型：Object可选。

AJAX 请求设置。

所有选项都是可选的。

async 类型：Boolean 默认值: true。

默认设置下，所有请求均为异步请求。

如果需要发送同步请求，请将此选项设置为 false。

注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。

jqueryajaxthinkphp异步局部刷新完整流程

jqueryajaxthinkphp异步局部刷新完整流程环境：ThinkPHP3.2.3，jQuery3.2前⾔：在⼀般的⽹站中，都需要⽤到jquery或者其他框架（⽐如angular）来处理前后端数据交互，thinkphp在后台也内置了⼀些函数⽤于数据交互（⽐如ajaxReturn()）。

本⽂的⽬的是打通使⽤ajax在jquery和thinkphp之间的前后端数据交互过程。

正⽂：⼀、thinkphp关于ajax的介绍1.1 ajaxReturn：\Think\Controller类提供了ajaxReturn⽅法⽤于AJAX返回数据给客户端（视图、模板、js等）。

并且⽀持JSON、JSONP、XML和EVAL四种⽅式给客户端接受数据（默认JSON）。

（链接：）配置⽅式：convention.php中定义了默认编码类型为DEFAULT_AJAX_RETURN => 'JSON',分析：ajaxReturn()调⽤了json_encode()将数值转换成json数据存储格式，常⽤的数值是数组。

注意：The value being encoded can be any type except a resource(资源⽂件).All string data must be UTF-8 encoded.（链接：）举例：$data['status'] = 1;$data['content'] = 'content';$this->ajaxReturn($data);1.2 请求类型：系统内置了⼀些常量⽤于判断请求类型，⽐如：常量说明IS_GET 判断是否是GET⽅式提交IS_POST 判断是否是POST⽅式提交IS_PUT 判断是否是PUT⽅式提交IS_DELETE 判断是否是DELETE⽅式提交IS_AJAX 判断是否是AJAX提交REQUEST_METHOD 当前提交类型⽬的：⼀⽅⾯可以针对请求类型作出不同的逻辑处理，另外⼀⽅⾯可以过滤不安全的请求。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

ajax异步
firstPage.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'firstPage.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

</head>
<body>
<br> AjAX异步第一页<br>
<input type="button" value="提交" onclick="test()">
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript">
function test() {
$.ajax({
cache : true,
type : "POST",
url : 'hello_hello.action',
data : [],
async : false,
error : function(request) {
alert("Ajax异步失败");
},
success : function(data) {
alert("Ajax异步成功");
}
});
/* location.href='hello.action'; */
}
</script>

</body>
</html>
struts.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"/dtds/struts-2.0.dtd">
<struts>

<constant name="struts.devMode" value="true" />

<constant name="struts.action.extension" value="action" />
<package name="default" namespace="/" extends="struts-default">
<action name="hello_*" class="cn.qlj.action.FirstAction" method="{1}">
</action>
</package>

</struts>
FirstAction.java
package cn.qlj.action;
import com.opensymphony.xwork2.ActionSupport;
public class FirstAction extends ActionSupport {
public String hello() {
System.out.println("hello,Ajax");
return null;
}
public String error() {
System.out.println("error,Ajax");
return null;
}
}。