心得技巧
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧

JSon和Ajax

发布时间：2022-07-04 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了JSon和Ajax，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

JSON

什么是 JSON ？

   JSON(JavaScript Object Notation) 是轻量级的文本数据交换格式,主要用来web服务前后端传输数据.

   JSON 独立于语言：JSON 使用 Javascript语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。 目前非常多的动态(PHP，JSP，.NET)编程语言都支持JSON。

   JSON 具有自我描述性，更易理解

JSON语法

   数据在 名称:值 对中  "username":"张三丰"

   数据由逗号分隔     "username":"张三丰","age":"128"

   大括号保存JSON对象     {"username":"张三丰","age":"128"}

   中括号保存数组     {"class":[{"JAVA":"102"},{"BigData":"104"},{"HTML":"107"}]}

       Json对象中存储的数据格式

              数字

                     {"age":18}

              布尔

                     {"result":true}

              字符串

                     {"name":"张三"}

              null

                     {"name":null}

演示

        // ======= json数据的格式 ======
        VAR jsopObj1 = {"username":"admin"}; // json对象,包含一个数据
        var jsopObj2 = {"username":"admin","password":"123456"};// json对象,包含多个数据,逗号隔开
        // key 双引号,value值如果是字符串-双引号
        var jsopObj3 = {"age":18, // 数字
                        "sex":true,// 布尔
                        "score":[98,99,100],// 数组,数组的元素是数字
                        // 数组,数组的元素是json对象
                        "jsonArr":[{"keyA":"valA"},{"keyB":"valB"},{"keyC":"valC"}]// 数组,数组的元素是
                    };
        
        // ======= json数据取值 ======
        // var value = json对象.key
        var v1 = jsopObj1.username; // admin
        var v2 = jsopObj3.age; // 18
        var v3 = jsopObj3.sex; // true
        var v4 = jsopObj3.score; // Array
        var v5 = jsopObj3.jsonArr; // Array
        var v6 = jsopObj3.jsonArr[1].keyB; // Array
        console.LOG(v1);
        console.log(v2);
        console.log(v3);
        console.log(v4);
        console.log(v5);
        console.log(v6);

        // ======= json数据赋值 ======
        jsopObj3.jsonArr[1].keyB = 1111;
        console.log(jsopObj3.jsonArr[1].keyB);

JSON对象和JSON字符串之间的转换

JSon和Ajax

 

AJAX

Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML)，是指一种创建交互式网页应用的网页开发技术。

       Ajax = 异步 JavaScript 和 XML 或者是 HTML(标准通用标记语言的子集)。

       Ajax 是一种用于创建快速动态网页的技术。

       Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

       通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

       传统的网页(不使用 Ajax)如果需要更新内容，必须重载整个网页页面。

       --> 异步请求，浏览器地址栏不改变，进行局部刷新。

原生javascript操作ajax的步骤麻烦,jquery将ajax操作封装后,更方便使用.

$.get

$.get(url, [data], [callback], [tyPE]) 发送get请求

url : 请求路径,必填

data: 数据,可选,格式是json格式

callback: 成功回调函数.可选

type: 返回的数据类型,可选,一般不设置

JSon和Ajax

后台就是普通的servlet

JSon和Ajax

 

$.post

与get请求一样,只是请求方式不同,自行演示…

$.ajax

$.ajax(url,[settings])

url: 请求路径,但是一般不使用,因为settings中也有url设置

settings: 对ajax请求的设置,里面30+选项,都是可选

[我们只对其中几个常用的选项做出解释]

url: 请求路径,String

type: 请求方式,String,默认是”GET”/”get”,可选post,put,delete等

data: 请求参数,发送到后端的数据.

     格式可以是表单数据,json数据

       dataType: 预期的服务器返回的数据类型,(一般不设置)

contentType: 发送至服务器的内容编码类型

默认:”application/x-www-From-urlencoded” (发送表单数据时就是这种内容类型),如果向后台发送json数据时,一般会指定为”application/json”

       success:function(data) {} ：成功的回调函数,data就是后台返回的数据

       error:function(){}        失败的回调函数

  <body>
  <button id="BTn">发送ajax请求</button>
  <script src="/js/jquery-2.1.0.min.js"></script>
  <script type="text/javascript">
    var btn = $("#btn");
    btn.click(function () {
        $.ajax({
            url:"/ajax",
            type:"post",
            data:"id=1&amp;name=admin",
            success:function (data) {
                console.log(data);
            },
            error:function () {
                alert("服务器正忙,请稍后再试...")
            }
        })
    });
  </script>
  </body>

@WebServlet("/ajax")
public class AJAXServlet extends HttpServlet{

    @override
    PRotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        System.out.println("==================get==================" );

        resp.setContentType("text/html;charset=utf-8");
        System.out.println("id = "+req.getParameter("id"));
        System.out.println("name = "+req.getParameter("name"));

        System.out.println(1/0 );

        PrintWrITer out = resp.getWriter( );
        out.write("{"code":200,";msg":"请求成功"}");
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("==================post==================" );
        resp.setContentType("text/html;charset=utf-8");
        System.out.println("id = "+req.getParameter("id"));
        System.out.println("name = "+req.getParameter("name"));

        PrintWriter out = resp.getWriter( );
        out.write("{"code":200,"msg":"请求成功"}");
    }
}

练习:

需求: 注册,输入用户名,使用ajax异步交互对名字进行校验

     数据库中有该名字,则禁止注册,无该名字,就可以注册

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <style>
        input{
            width: 350px;
            height: 50px;
            font-Size: 43px;
        }
    </style>
</head>
<body>
    用户名<input id="username" type="text"><span id="tip"></span>
    <script src="/js/jquery-2.1.0.min.js"></script>
    <script type="text/javascript">
        var username = $("#username");
        var tip = $("#tip");
        username.blur(function () {
            // 获得输入框的值
            var val = username.val();
            $.ajax({
                url:"/regist",
                data:"name="+val,
                type:"get",
                success:function (data) {
                    var ret = JSON.parse(data);
                    if (ret.code == 200) {
                        tip.text(ret.msg);
                        tip.css({color:"green",fontSize:"43px"})
                    }else{
                        tip.text(ret.msg);
                        tip.css({color:"red",fontSize:"43px"})
                    }
                }
            })
        })
    </script>
</body>
</html>

@WebServlet("/regist")
public class RegistServlet extends HttpServlet{

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/html;charset=utf-8");

        String name = req.getParameter("name");
        /**
         * 无数据库,假设,admin,root禁止注册,其他均可
         * ---------------------------------
         * code : 200,可以注册|500 ,不可以注册
         */
        String json ="";
        if ("admin".equals(name) || "root".equals(name)){
            json ="{"code":500,"msg":"用户名已存在"}";
        } else {
            json ="{"code":200,"msg":"可以注册"}";
        }

        resp.getWriter().write(json);
    }
}

ajax提交整个表单数据-form形式数据

问题: 单独获得每一个输入框对象,然后获得其值.后再拼接成数据格式

var v1 = $(“#id1”);

var v2 = $(“#id1”);

“id1=”+v1+”&id2=”+v2 è id1=v1&id2=v2

-------------------------------------------------------------------------------------------------------------------------

以上方式,太繁琐,JQuery提供了一个方法serialize(),可以将整个表单的数据直接序列化成如下格式

“k1=v1&k2=v2&k3=v3…”

编写前端页面： 

<form >

    用户名<input type="text" name="username"><br>
    密码<input type="password" name="password"><br>
    性别<input type="radio" name="sex" value="1">男
        <input type="radio" name="sex" value="2">女<br>
    学科<input type="checkbox" name="subject" value="java">java
        <input type="checkbox" name="subject" value="html">html
        <input type="checkbox" name="subject" value="python">python<br>
    籍贯<select name="province">
            <option value="hn">河南</option>
            <option value="hb">河北</option>
            <option value="bj">北京</option>
        </select><br>
    <input id="btn" type="button" value="注册">
</form>
    <script src="/js/jquery-2.1.0.min.js"></script>
    <script type="text/javascript">
        $("#btn").click(function () {
           var data = $("form").serialize();
            $.ajax({
                url:"/regist2",
                data:data,
                type:"post",
                success:function (data) {
                    var ret = JSON.parse(data);
                    if (ret.code == 200) {
                        alert(ret.msg);
                    }else{
                        alert(ret.msg);
                    }
                }
            })
        });
    </script>
</body>

创建Servlet，配置路径：

  @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/html;charset=utf-8");

        System.out.println(req.getParameter("username"));
        System.out.println(req.getParameter("password"));
        System.out.println(req.getParameter("sex"));
        System.out.println(req.getParameter("subject"));
        System.out.println(req.getParameter("province"));
        String json = "{"code":200,"msg":"OK"}";

        resp.getWriter().write(json);
    }

ajax提交整个表单数据-json形式数据

同理，JQuery也提供了一个方法serializeArray()，将整个表单的数据转换为json数据形式

                                                   同时contentType也要设置为："application/json"

 如果前端发送的数据内容格式为:contentType:"application/json",           即发送到后台的是json数据           req.getParameter()这种方式接收不到数据          原生的servlet,json是以输入流的形式在请求中.          所以,获取json数据,就是从输入流读数据         BufferedReader reader = req.getReader( );

表单和 上述表单一致，此处只列出不同之处 

        $("#btn").click(function () {
           var data = $("form").serializeArray();
           console.log(data);
            $.ajax({
                url:"/regist2",
                data:data,
                type:"post",
                contentType:"application/json",
                success:function (data) {
                    var ret = JSON.parse(data);
                    if (ret.code == 200) {
                        alert(ret.msg);
                    }else{
                        alert(ret.msg);
                    }
                }
            })
        });

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/html;charset=utf-8");

        /**
         * req.getParameter() 这会获得内容类型会表单的数据
         * 即contentType:"application/x-www-form-urlencoded",
         */
       // System.out.println(req.getParameter("username"));
       // System.out.println(req.getParameter("password"));
       // System.out.println(req.getParameter("sex"));
        //System.out.println(req.getParameter("subject"));
       // System.out.println(req.getParameter("province"));

        /**
         * 如果前端发送的数据内容格式为:contentType:"application/json",
         * 即发送到后台的是json数据
         * req.getParameter()这种方式接收不到数据
         * ---------------------------------------------------
         * 原生的servlet,json是以输入流的形式在请求中.
         * 所以,获取json数据,就是从输入流读数据
         */

        // 缓冲字符输入流
        BufferedReader reader = req.getReader( );
        String line = null;
        while((line =reader.readLine()) != null) {
            System.out.println(line ); // 读到的是form字符串
        }

        String json = "{"code":200,"msg":"OK"}";
        resp.getWriter().write(json);
    }

总结

前端的内容类型为 contentType=”application/json” , 后端就需要使用处理json的形式接收数据

前端的内容类型为contentType=”application/x-www-form-urlencoded”,后端就以正常的表单形式接收数据(没有指定contentType时默认为”application/x-www-form-urlencoded”)

脚本宝典总结

以上是脚本宝典为你收集整理的JSon和Ajax全部内容，希望文章能够帮你解决JSon和Ajax所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：javajavascriptphppythonStringwhilewhile参数参数序列化序列化开发开发数据库数据库程序员程序员
猜你在找的心得技巧相关文章
其他相关热搜词更多
phpjavapython程序员loadpost-format-gallerydivString参数开发ListcapMapClass工具安装SQL数据库资源this
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新心得技巧教程
热门心得技巧教程