zoukankan      html  css  js  c++  java
  • jqueryAjax

    jqueryAjax

    $.getJson(url,data,function(){});

    $.get(url,data,function(){},'json');

    $.ajax()

    $.ajax({
      url:'userServlet',
      type:'get',
      data:'function=login?userName='+userName,
      data:'json',
      success:function(result){},
      error:function(){}
    });

    2.json的定义 javascript object notation


    JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。
    简要历史编辑
    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999的一个子集。
    JSON是Douglas Crockford在2001年开始推广使用的数据格式,在2005年-2006年正式成为主流的数据格式,雅虎和谷歌就在那时候开始广泛地使用JSON格式。
    JSON 语法编辑
    JSON 语法规则
    JSON是一个标记符的序列。这套标记符包含六个构造字符、字符串、数字和三个字面名。
    JSON是一个序列化的对象或数组。
    1. 六个构造字符:
    begin-array = ws %x5B ws ; [ 左方括号
    begin-object = ws %x7B ws ; { 左大括号
    end-array = ws %x5D ws ; ] 右方括号
    end-object = ws %x7D ws ; } 右大括号
    name-separator = ws %x3A ws ; : 冒号
    value-separator = ws %x2C ws ; , 逗号
    2. 在这六个构造字符的前或后允许存在无意义的空白符(ws):
    ws = *(%x20 /; 空间
    %x09 /; 水平标签
    %x0A /; 换行或换行
    %x0D); 回程
    3.JSON的值:
    3.1 JSON的构成: ws 值 ws [1]
    3.2值可以是对象、数组、数字、字符串或者三个字面值(false、null、true)中的一个。值中的字面值中的英文必须使用小写。
    3.2.1对象由花括号括起来的逗号分割的成员构成,成员是字符串键和上文所述的值由逗号分割的键值对组成,如:
    1
      {"name": "John Doe", "age": 18, "address": {"country" : "china", "zip-code": "10000"}}
    3.2.2数组是由方括号括起来的一组值构成,如:
    1
    [3, 1, 4, 1, 5, 9, 2, 6]
    3.2.3 字符串与C或者Java的字符串非常相似。字符串是由双引号包围的任意数量Unicode字符的集合,使用反斜线转义。一个字符(character)即一个单独的字符串(character string)。
    3.2.4数字也与C或者Java的数值非常相似。除去未曾使用的八进制与十六进制格式。除去一些编码细节。 [2]
    一些合法的JSON的实例:
    1
    {"a": 1, "b": [1, 2, 3]}
    1
    [1, 2, "3", {"a": 4}]


    JSON 与 JS 对象的关系
    很多人搞不清楚 JSON 和 JS 对象的关系,甚至连谁是谁都不清楚。其实,可以这么理解:
    JSON 是 JS 对象的字符串表示法,它使用文本表示一个 JS 对象的信息,本质是一个字符串。

    1
    var obj = {a: 'Hello', b: 'World'}; //这是一个对象,注意键名也是可以使用引号包裹的
    1
    var json = '{"a": "Hello", "b": "World"}'; //这是一个 JSON 字符串,本质是一个字符串

    JSON 和 JS 对象互转
    要实现从JSON字符串转换为JS对象,使用 JSON.parse() 方法:
    1
    var obj = JSON.parse('{"a": "Hello", "b": "World"}'); //结果是 {a: 'Hello', b: 'World'}
    要实现从JS对象转换为JSON字符串,使用 JSON.stringify() 方法:
    1
    var json = JSON.stringify({a: 'Hello', b: 'World'}); //结果是 '{"a": "Hello", "b": "World"}'

    https://www.bejson.com/ json在线解析工具

    get:保密性,post高于get,对于真正懂代码的人来说,get 拿,从服务器获取数据,get 查询,删除

    post: 提交 传输 把客户端的数据提交给服务器,新增,修改

    编码架构风格:restful get post delete update

    案例


    java代码改造:
    String jsonStr="{"result":"+flag+"}";
              System.out.println("jsonStr:"+jsonStr);
              out.write(jsonStr);
               
               
    jquery代码改造:

                        $.getJSON("userServlet","method=validateUserName&userName="+userName,success) ;  
               
               
               

    $("#idDiv").load("useServlet");

    使用场景:加载页面!


    <%--
    Created by IntelliJ IDEA.
    User: 80468
    Date: 2020/10/23
    Time: 10:20
    To change this template use File | Settings | File Templates.
    --%>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
      <title>$.load();</title>
    </head>
    <body>
      <h1>主页</h1>
      <div>

          <div>头部</div>
          <div>左边菜单栏
              <ul>
                  <li><a href="javascript:void(0)" onclick="queryUserlist()" >查看所有用户</a></li>
                  <li><a href="javascript:void(0)" onclick="queryUserlist2()" >查看用户</a></li>
                  <li><a href="javascript:void(0)" onclick="queryUserlist3()" >查看其他</a></li>

              </ul>
          </div>
          <div id="showDiv" border="2px" >主显示区域</div>
          <div>尾部</div>


      </div>

      <script src="js/jquery-3.3.1.js"></script>
      <script>
          function queryUserlist() {
              alert("queryUserlist");
              $("#showDiv").load("userServlet","method=queryUserlist");
          }

          function queryUserlist2() {
              alert("queryUserlist");
              $("#showDiv").load("userServlet","method=queryUserlist2");
          }

          function queryUserlist3() {
              alert("queryUserlist");
              $("#showDiv").load("userServlet","method=queryUserlist3");
          }
      </script>
    </body>
    </html>

    Map map =new HashMap<String,Object>();
              map.put("result",flag);
              String jsonStr= JSON.toJSONString(map);
              System.out.println("fastjson:"+jsonStr);
              out.write(jsonStr);
  • 相关阅读:
    (1)前言——(10)jquery项目的历史(History of the jQuery project)
    JavaScript编程:使用DOM操作样式表
    机房收费系统总结之4——VB.NET 轻松解决判断文本框、组合框为空问题
    协同过滤及大数据处理
    Storm工作流程 vs. Spark Stream
    《大数据技术原理与应用》学习
    gdb的follow-fork-mode使用以及多线程操作
    回上海咯!继续学习计算广告
    美团技术博客
    这里面有一些关于依图工作的内容
  • 原文地址:https://www.cnblogs.com/xj1111/p/13899339.html
Copyright © 2011-2022 走看看