Chapter11-Ajax扩展

最新推荐文章于 2020-09-08 19:59:50 发布

Tequila-陶乾

最新推荐文章于 2020-09-08 19:59:50 发布

阅读量173

点赞数 2

分类专栏： JSP js 文章标签： ajax json javascript

本文链接：https://blog.csdn.net/weixin_43791396/article/details/107330239

版权

JSP 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

1.掌握更多的jQuery实现Ajax的方法

$.getJSON({
  url:"user",
   data:{"username":username},
   success:function (result) {
     /*只能解析json对象  需要把json字符串转化为json对象*/
     /*result = JSON.parse(result);*/
     //alert(result);
     if (result == "exist"){
       span.html("<lable style='color: red'>此用户名已被注册!</lable>")
     } else{
       span.html("<lable style='color: green'>可以使用!</lable>")
     }
   },error:function () {
     alert("程序异常")
   }
 })
 /*post() :必须按照顺序来写 url data success dataType*/
 $.post({
   url:"user",
   data:"username="+username,
   success:function (result) {
     if (result == "exist"){
       span.html("<lable style='color: red'>此用户名已被注册!</lable>")
     } else{
       span.html("<lable style='color: green'>可以使用!</lable>")
     }
   },
   dataType:"text",
   error:function () {
     alert("程序异常!")
   }
 })
 /*get() :必须按照顺序来写 url data success dataType*/
 $.get({
   url:"user",
   data:"username="+username,
   success:function (result) {
     if (result == "exist"){
       span.html("<lable style='color: red'>此用户名已被注册!</lable>")
     } else{
       span.html("<lable style='color: green'>可以使用!</lable>")
     }
   },
   dataType:"text",
   error:function () {
     alert("程序异常!")
   }
 })

$.ajax({
 url:"user",
  type:"post",
  dataType:"html",
  data:{"username":username},
  success:function (result) {
      $("html").html(result);
      /*
      dataType:"html",:预期响应回来的数据类型
      * $("html")：选中页面中的html标签
      * html(): 向页面添加内容
      * $("html").html(): 向html 标签里面添加内容
      * result: 响应回来的数据
      * <html>
          <head>
              <title>登录成功欢迎界面</title>
          </head>
          <body>
              <h1>欢迎你Tequila</h1>
          </body>
         </html>
          $("html").html(result); :将响应回来的数据填充进html标签里面
      */
  }
})

 /*直接加载部分页面到现在这个页面中*/
 $(".content").load("user?username="+username+"   .content");

2.掌握jQuery解析表单数据的方法

 /*jquery封装了获取表单数据的方法*/
 var data = $("#myform").serialize();
  /*自动封装成请求参数 uname=admin&pwd=123&email=17610959600@163.com*/
  alert(data);

3.掌握使用fastJSON生成JSON字符串的方法

fastJSON:是阿里巴巴开源你的一款序列化与反序列化的高性能工具能够帮助你将实体类转化为json字符串也能够反之将json字符串转化为实体类
JSON.toJSONString(user); :将实体类转化为json字符串
JSON.parse(result); : 将json字符串解析为json对象

/*SerializerFeature.PrettyFormat:json格式转化为漂亮的格式*/
/*将带有日期的对象按照规定格式转化为json字符串*/
JSON.toJSONStringWithDateFormat(user,"yyyy-MM-dd",SerializerFeature.PrettyFormat)

4.掌握jQuery与其他脚本库冲突的方法

jquery中的 $符号并不是唯一的其他的脚本库也有$ 符号一旦遇到相同的脚本都是使用 $符号的 j Q u e r y 可以让出$ 符号的使用权:

   jQuery.noConflict();/!*让出$符号的使用权*!/
    jQuery(document).ready(function () {
        alert("1");
    })
   var $j = jQuery.noConflict();/!*让出$符号的使用权并修改了自己的编码风格*!/
   $j(function () {
       alert("1")
       $j("body").html("你好啊,我将我的$让出来了!");
   })
  /*让出自己的$使用权 并且自己的编码风格也不想改变*/
   jQuery.noConflict();
   jQuery(document).ready(function ($) {
       $("body").html("你好啊,我将我的$让出来了!,但是自己还可以使用$符号");
   })
   (function ($) {
       $("body").html("你好啊,我将我的$让出来了!,但是自己还可以使用$符号");
   })(jQuery)