文档章节

Ajax + Json 基本用法(自整理)

SLoan_
 SLoan_
发布于 2016/09/06 14:18
字数 1389
阅读 44
收藏 2

Asynchronous javaScipt and Xml
什么是Ajax:异步访问服务器,不刷新页面!不是一项新技术,整合了几项技术组成.主要目的是为了提高用户体验度
执行流程: 在用户界面触发事件调用javaScipt,通过引擎(XMLHttpRequest)对象异步发送请求到服务器,服务器返回XML,JSON,或HTML等格式的数据,然后利用返回一的数据使用DOM和CSS技术局部刷新用户界面。
作用:通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

readyState 状态:0.未初始化1.开始发送请求2.请求发送完成3.开始读取响应4.读取响应结束
Status 状态:200-正确返回,404-找不到访问对象,403-没有访问权限,500-数据错误
onreadystatechange:设置回调函数

1.进行Ajax原生操作
    1.创建XMLHttpRequest对象
    2.设置回调函数
    3.初始化XMLHttpRequest组件
    4.发送请求
    5.参考(validate_Email.jsp,practice_server.jsp)文件

使用JQuery实现Ajax方法(必须导入jquery-1.8.3.js)文件才能使用!
2.$.ajax()方法:{}方法中基本参数有6个分别是:每个参数以:“参数名:参数值”的方法书写
    $.ajax({
        url:要提交的路径
        type:发送的请求方法(Get/Post)
        data:要发送的到服务器的数据
        dateType:指定要传输的数据格式 (xml,html,script,json,text,jsonp)
        success:function(result){ :请求成功之后要执行的代码(result,ts)
            ..省略
        },
        error:function(){ :请求失败之后要执行的代码(xhr,em,e)
            alert("系统升级完善中,求稍后再尝试..");
        }
    });
注意: success:function(result,status){  参数1:有服务器中返回的数据。参数2:请求类型的字符串
            error:function(xhr,msg,etype){ 参数1:XMLHttpRequest对象。参数2:错误信息。参数3:捕获的异常对象。
    参考(validate_Email_JQuery.jsp,VaildateEmailServlet)文件

除了$.ajax()方法还有:  以PSOT/GET请求发送Ajax
                 $.get{url,data,success(resp,status,xhr),dataType};
                 $.post{url,data,success(resp,status,xhr),dataType};
                  将页面片段载入到selector(选择器)所表达的容器中
                 $.load{url,data,success(resp,status,xhr)};
                   有待验证用法..
                   加载JSON格式数据或脚本
                 $.getJSON(url,[data],[callback])
                 $.getScript(url,[callback])
                 
什么是JSON:轻量级的数据交换格式,能够替代XML的工作.
保存文件的格式可以为:js,json(jsondemo.js或者test.json)
优点是:数据格式比较简单, 易于读写, 格式都是压缩的, 占用带宽小
语法/书写格式是: 名称/值对。多个值之间使用逗号分隔:var JSON对象 = {key:value,key:value··};
           value可以是:String,Number,boolean,null,对象,数组,等等类型
    1.数据在键值对中,中间用冒号隔开:
    2.数据由逗号分隔,
    3.花括号保存对象{}
    4.方括号保存数组[]
注意: 数组:var JSON对象 = [value,value,··];
 用法:1.jsondemo.js 编写Js文件    {"key":"value"}
    2.在页面输出
    参考:(jsondemo.js,json.jsp)文件

    发送JSON格式数据到服务端,或者接收从服务器端返回的JSON格式数据。
    必须使用$getJSON()方法异步发送请求到服务端,并以JSON格式封装客户端与服务端间传递的数据。
    语法:$getJSON(url,data,success(result,status,xhr))
    等价于: 使用$Ajax({参数中,指定类型:dataType:"JSON"})就是两个方法一样的功效
    注意:使用该方法时,默认从服务器接收到数据就是JSON对象,不需要再解析即可使用

读取文件 test.json 读取时指定绝对路径
    $getJSON使用方式:$.getJSON("jqueryjs/test.json",function(data){
                       var dataValue = data.key;
                  }
                  
解析字符串的方法: $.parseJSON(str)
               用法:var Str = {"name":"林林林"};
           alert($.parseJSON(Str).name);结果输出:弹框信息:林林林
                 
                 
使用Ajax+JSON+struts.xml+Action访问数据
使用JSON插件实现JSON类型的Result,实现JSON作为服务器和客户端之间的传递数据
    1.先导入包:struts2-json-plugin-2.3.15.1.jar
    2.在struts.xml文件中编写<package>,并指定该包继承于json-default
    3.在<package>下定义<action>,并将结果标签指定属性为:<result type = "json"></result>
   例子:struts.xml文件中
    <package name="ajax" extends="json-default" namespace="/">
                <!-- 使用Ajax方式的Action -->
        <action name="loginUsersAjax" class="cn.struts2.action.LoginUsersAjaxAction" method="login">
            <!-- <result name="input">/loginAjax.jsp</result> -->
            
            <!-- 将返回类型的Type指定为json就可以进行服务端和客户端进行数据传递了 -->
            <result name="success" type="json">
                
                <!-- includeProperties 返回指定屬性的值 -->
                <param name="includeProperties">users,nextAction</param>
                
                <!-- root 返回要指定的序列化的根对象,若指定多个则只返回最后一个 --> 
                <!-- <param name="root">user</param> -->
                <!-- excludeProperties 指定的属性不返回 -->
                <!-- <param name="excludeProperties">user.password</param> -->
                <!-- excludeNullProperties 指定的属性如果为空就不返回,不为空才返回 -->
                <!-- <param name="excludeNullProperties">true</param> -->
            </result>
        </action>
    </package>
 jsp页面:必须保证能正常使用JQuery!(导包)
 <script type="text/javascript">
    function validate() {
        var name = $("#name").val();
        var pwd = $("#pwd").val();
        /* alert(name);alert(pwd); */
        if (name == null || name == "") {
            $("#errorMsg").html("<span style='color:red'>请输入用户名!</span>");
        } 
        $.ajax({
            url : "loginUsersAjax", // 访问struts.xml 
            type : "post",
            data : {
                "users.name" : name,
                "users.password" : pwd
            },
            dataType : "json",
            success : function(data) {
                $("#errorMsg").html("");
                alert(data.nextAction);
                if (data != null && data.users!=null) {
                    location.href = data.nextAction;
                } else {
                    $("#errorMsg").html("<span style='color:red'>输入用户名或者密码不正确!</span>");
                }
            },
            error : function(xhr, msg, etype) {
                alert("异常类型1:" + etype + ",异常信息:" + msg);
            }
        });

    };
</script>    
    

使用正则表达式验证方法为:正则表达式.test(获取的值)
            列子: var email = $("#email").val();
                var testEmail = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
                if(testEmail.test(email)){return"是邮箱"}else{return"不是邮箱"}

© 著作权归作者所有

SLoan_
粉丝 11
博文 31
码字总数 45927
作品 0
广州
运维
私信 提问
MVC中返回json数据的两种方式

MVC里面如果直接将数据返回到前端页面,我们常用的方式就是用return view(); 那么我不想直接用razor语法,毕竟razor这玩意儿实在是太难记了,还不如写ajax对接来得舒服不是 那么我们可以这么...

饮雪俊枫
2018/09/25
0
0
Extjs 3.2 EXT中的AJAX

Extjs与后台交换数据时,很大程度上依赖于底层实现的AJAX,下面就回顾下工作中最常用的异步请求。 Ext.Ajax: 基本用法如下: Ext.Ajax.request({url : ctxPath+ "/admin/allowUpdaterConfP...

林仙彬
2013/06/14
393
0
JqueryDataTable获取不到springmvcResponseBody返回的json对象

JqueryDatatable是一个很强大的jquery的table插件,可以访问官网http://www.datatables.net/,中文学习网站 http://datatables.club/index.html Datatable支持ajax获取对应的数据,具体可以参...

王小明123
2016/03/14
165
0
【ajax】 $.ajax()的基本用法

代码模版: $.ajax({ type: "POST", url: "/login", contentType: 'application/x-www-form-urlencoded;charset=utf-8', data: {username:$("#username").val(), password:$("#password").va......

林元煌
2017/09/19
0
0
Jquery与js原生

元素操作 Add Class After Append Before Children Clone Contains Contains Selector Each Empty 查找子元素 查找、选择器 获取属性值attr 获取CSS样式 获取文本内容 Has Class 元素比较 比...

大仁孙
2016/07/21
23
0

没有更多内容

加载失败,请刷新页面

加载更多

Redis缓存NoSQL

redis的应用场景有哪些 1、会话缓存(最常用) 2、消息队列,比如支付 3、活动排行榜或计数 4、发布、订阅消息(消息通知) 5、商品列表、评论列表等

BobwithB
14分钟前
2
0
「绘画技巧」一分钟画出动漫人物的喜怒哀乐中“喜”的各种表情

「绘画技巧」一分钟画出动漫人物的喜怒哀乐中“喜”的各种表情 表情拥有着可以凸显动漫人物情绪和主张的魔力,表情渲染整个环境。那么今天来和大家一起分享自己整理收集动漫人物喜怒哀乐中的...

知北
17分钟前
3
0
从流中的三种求和方式谈起

//使用reduce()方法int reduce = Arrays.asList(ins).stream().reduce(0, Integer::sum);//Collectors类的工厂方法,收集器int collect1 = Arrays.asList(ins).stream().collect(Colle......

我的眼里只有眼屎
18分钟前
2
0
File类的使用(文件与文件夹,获取,判断存在,删除,)

//File类的使用 public static void main(String[] args) throws IOException, ClassNotFoundException { //test3();// File f = new File("E:\\资料\\第二阶段\\d......

zhengzhixiang
21分钟前
2
0
58到家MySQL军规升级版

转载 2018-03-30 58到家DBA 架构师之路 一、基础规范 表存储引擎必须使用InnoDB 表字符集默认使用utf8,必要时候使用utf8mb4 解读: 通用,无乱码风险,汉字3字节,英文1字节 utf8...

xiaolyuh
29分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部