day35-JSON&Ajax03

liyuelian 2023-03-28 原文

JSON&Ajax03

4.jQuery的Ajax请求

原生Ajax请求问题分析：

编写原生的Ajax要写很多的代码，还要考虑浏览器兼容问题，使用不方便
在实际工作中，一般使用JavaScript的框架（比如jquery）发动Ajax请求，从而解决这个问题。

4.1jQuery Ajax操作方法

在线文档：jQuery 参考手册 - Ajax (w3school.com.cn)

4.2$.ajax()方法

完整的参数查看手册：jQuery ajax - ajax() 方法

$.ajax 常用参数：

url：请求的地址
type：请求的方式get或者post，默认为 "GET"。

注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。
data：发送到服务器的数据，将自动转换为请求字符串格式
success：请求成功后的回调函数

参数：由服务器返回，并根据 dataType 参数进行处理后的数据；描述状态的字符串。

这是一个 Ajax 事件。
error：默认值: 自动判断 (xml 或 html)，请求失败时的回调函数。
dataType：指定返回的数据类型，常用json或text

4.3`$.get()`和`$.post()`请求

jQuery AJAX get() 和 post() 方法

$.get()请求和$.post()请求常用参数：

url：请求的url地址
data：请求发送到服务器的数据
success：成功时的回调函数
type：返回内容的格式，xml，html，script，json，text

说明：$.get() 和 $.post() 底层还是使用$.ajax()方法来实现异步请求

4.3.1$.get()

get() 方法通过远程 HTTP GET 请求载入信息

这是一个简单的 GET 请求功能以取代复杂 $.ajax，请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax().

语法：

$(selector).get(url,data,success(response,status,xhr),dataType)

4.3.2$.post()

post() 方法通过 HTTP POST 请求从服务器载入数据。

语法：

jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)

4.4$.getJSON()方法

jQuery ajax - getJSON() 方法

$.getJSON()常用参数

url：请求发送哪个url
data：请求发送到服务器的数据
success：请求成功时运行的函数

说明：$.getJSON()底层使用$.ajax()方法来实现异步请求

$.getJSON()方法通过 HTTP GET 请求载入 JSON 数据，语法：

jQuery.getJSON(url,data,success(data,status,xhr))

4.5应用实例

4.5.1$.ajax()应用实例

演示jquery发送ajax的案例

在输入框输入用户名
点击验证用户名，服务端验证该用户是否已经占用了，如果是，则以json格式返回该用户信息
假定king为已使用的用户名
对页面进行局部刷新，显示返回的信息

思路分析：直接参考3.2的思路图即可

引入jquery库：

注意：如果有的资源是拷贝进来的，有时候运行目录out没有及时更新，这时可以点击Rebuild Project，如果不行就redeploy Tomcat

配置servlet：

<servlet>
    <servlet-name>CheckUserServlet2</servlet-name>
    <servlet-class>com.li.ajax.servlet.CheckUserServlet2</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>CheckUserServlet2</servlet-name>
    <url-pattern>/checkUserServlet2</url-pattern>
</servlet-mapping>

创建CheckUserServlet2：

package com.li.ajax.servlet;

import com.google.gson.Gson;
import com.li.ajax.entity.User;

import javax.servlet.*;
import javax.servlet.http.*;
import java.io.IOException;

public class CheckUserServlet2 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request, response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //接收jquery发送的ajax数据
        String username = request.getParameter("username");//参数名取决于前端的参数名

        response.setContentType("text/json;charset=utf-8");//指定MIME类型为json

        Gson gson = new Gson();
        if ("king".equals(username)) {
            //后面可以接入数据库database
            User user = new User(100, "king", "123", "king@163.com");
            response.getWriter().print(gson.toJson(user));
        } else {
            //返回一个不存在的User-->测试
            User user = new User(-1, "", "", "");
            response.getWriter().print(gson.toJson(user));
        }
    }
}

login2.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <!--    引入jquery-->
    <script type="text/javascript" src="./script/jquery-3.6.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //绑定事件
            $("#btn1").click(function () {
                //发出ajax请求
                /**
                 * 1.指定参数时，需要在{}里面
                 * 2.指定参数时，需要指定参数名
                 * 3.dataType:"json" 代表要求服务器返回的数据是json，
                 *          如果服务器返回的不是json，就会解析出错
                 */
                $.ajax({
                    url: "/ajax/checkUserServlet2",
                    type: "post",
                    data: {//这里我们直接给一个json
                        username: $("#uname").val(),
                        date : new Date()//防止浏览器缓存
                    },
                    error:function () {//失败后的回调函数
                        console.log("失败")
                    },
                    success:function (data,status,xhr) {
                        console.log("成功");
                        console.log("data=",data);
                        console.log("status=",status);
                        console.log("xhr=",xhr);
                        //data是一个json对象，需要转成json字符串
                        $("#div1").html(JSON.stringify(data));
                        //对返回的结果进行处理
                        if (""==data.username){//说明用户名可用
                            $("#myres").val("该用户名可用");
                        }else {
                            $("#myres").val("该用户名不可用");
                        }
                    },
                    dataType:"json"
                })
            })
        })
    </script>
</head>
<body>
<h1>用户注册-Jquery+Ajax</h1>
<form action="/ajax/checkUserServlet2" method="post">
    用户名字:<input type="text" name="username" id="uname">
    <input type="button" id="btn1" value="验证用户名">
    <input style="border-width: 0;color: red" type="text" id="myres"><br/><br/>
    用户密码:<input type="password" name="password"><br/><br/>
    电子邮件:<input type="text" name="email"><br/><br/>
    <input type="submit" value="用户注册">
</form>
<h1>返回的 json 数据</h1>
<div id="div1"></div>
</body>
</html>

4.5.2$.get()应用实例

使用4.5的应用实例，将上面的html页面改写，其他不变。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <!--    引入jquery-->
    <script type="text/javascript" src="./script/jquery-3.6.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //绑定事件
            $("#btn1").click(function () {
                //演示$.get()使用
                // $.get()默认是get请求，不需要指定请求方式
                //不需要写参数名，但是参数的位置要正确对应，
                // 顺序是：url，data，success回调函数，返回的数据格式
                $.get(
                    "/ajax/checkUserServlet2",
                    {//这里我们直接给一个json
                        username: $("#uname").val(),
                        date: new Date()//防止浏览器缓存
                    },
                    function (data, status, xhr) {
                        console.log("$.get成功")
                        console.log("data=", data);
                        console.log("status=", status);
                        console.log("xhr=", xhr);
                        //data是一个json对象，需要转成json字符串
                        $("#div1").html(JSON.stringify(data));
                        //对返回的结果进行处理
                        if ("" == data.username) {//说明用户名可用
                            $("#myres").val("该用户名可用");
                        } else {
                            $("#myres").val("该用户名不可用");
                        }
                    },
                    "json"
                )
            })
        })
    </script>
</head>
<body>
<h1>用户注册-Jquery+Ajax</h1>
<form action="/ajax/checkUserServlet2" method="post">
    用户名字:<input type="text" name="username" id="uname">
    <input type="button" id="btn1" value="验证用户名">
    <input style="border-width: 0;color: red" type="text" id="myres"><br/><br/>
    用户密码:<input type="password" name="password"><br/><br/>
    电子邮件:<input type="text" name="email"><br/><br/>
    <input type="submit" value="用户注册">
</form>
<h1>返回的 json 数据</h1>
<div id="div1"></div>
</body>
</html>

4.5.3$.post()应用实例

使用4.5的应用实例，将上面的html页面改写，其他不变。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <!-- 引入jquery-->
    <script type="text/javascript" src="./script/jquery-3.6.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //绑定事件
            $("#btn1").click(function () {
                //$.post 和 $.get的调用方式基本一样，只是这时是以post方式发送ajax请求
                $.post(
                    "/ajax/checkUserServlet2",
                    {//这里我们直接给一个json
                        username: $("#uname").val(),
                        date: new Date()//防止浏览器缓存
                    },
                    function (data, status, xhr) {
                        console.log("$.post成功")
                        console.log("data=", data);
                        console.log("status=", status);
                        console.log("xhr=", xhr);
                        //data是一个json对象，需要转成json字符串
                        $("#div1").html(JSON.stringify(data));
                        //对返回的结果进行处理
                        if ("" == data.username) {//说明用户名可用
                            $("#myres").val("该用户名可用");
                        } else {
                            $("#myres").val("该用户名不可用");
                        }
                    },
                    "json"
                )
            })
        })
    </script>
</head>
<body>
<h1>用户注册-Jquery+Ajax</h1>
<form action="/ajax/checkUserServlet2" method="post">
    用户名字:<input type="text" name="username" id="uname">
    <input type="button" id="btn1" value="验证用户名">
    <input style="border-width: 0;color: red" type="text" id="myres"><br/><br/>
    用户密码:<input type="password" name="password"><br/><br/>
    电子邮件:<input type="text" name="email"><br/><br/>
    <input type="submit" value="用户注册">
</form>
<h1>返回的 json 数据</h1>
<div id="div1"></div>
</body>
</html>

4.5.4$.getJSON()应用实例

使用4.5的应用实例，将上面的html页面改写，其他不变。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <!--    引入jquery-->
    <script type="text/javascript" src="./script/jquery-3.6.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //绑定事件
            $("#btn1").click(function () {
                //如果你通过jquery发出的ajax请求是get请求，并且返回的数据格式是json，
                // 可以直接使用getJSON()函数，很方便
                $.getJSON(
                    "/ajax/checkUserServlet2",
                    {//这里我们直接给一个json
                        username: $("#uname").val(),
                        date: new Date()//防止浏览器缓存
                    },
                    function (data, status, xhr) {//成功后的回调函数
                        console.log("$.getJSON成功")
                        console.log("data=", data);
                        console.log("status=", status);
                        console.log("xhr=", xhr);
                        //data是一个json对象，需要转成json字符串
                        $("#div1").html(JSON.stringify(data));
                        //对返回的结果进行处理
                        if ("" == data.username) {//说明用户名可用
                            $("#myres").val("该用户名可用");
                        } else {
                            $("#myres").val("该用户名不可用");
                        }
                    }
                )
            })
        })
    </script>
</head>
<body>
<h1>用户注册-Jquery+Ajax</h1>
<form action="/ajax/checkUserServlet2" method="post">
    用户名字:<input type="text" name="username" id="uname">
    <input type="button" id="btn1" value="验证用户名">
    <input style="border-width: 0;color: red" type="text" id="myres"><br/><br/>
    用户密码:<input type="password" name="password"><br/><br/>
    电子邮件:<input type="text" name="email"><br/><br/>
    <input type="submit" value="用户注册">
</form>
<h1>返回的 json 数据</h1>
<div id="div1"></div>
</body>
</html>

4.6练习

● 需求分析: 到数据库去验证用户名是否可用

点击验证用户名, 到数据库中验证用户名是否可用
创建数据库 ajaxdb , 创建表 user 表自己设计
使用 Jquery + ajax 方式，服务端验证该用户名是否已经占用了, 如果该用户已经占用，以 json 格式返回该用户信息
对页面进行局部刷新, 显示返回信息

提示: 根据day34-JSON&Ajax02-3.3练习的 ajax 请求+jdbc+mysql 到数据库验证案例完成

根据之前的day34-JSON&Ajax02-3.3练习，我们已经写了JDBCUtilsByDruid，BaseDAO，UserDAO，UserService，User等类，只需要在CheckUserServlet2中修改一下代码即可完成：

package com.li.ajax.servlet;

import com.google.gson.Gson;
import com.li.ajax.entity.User;
import com.li.ajax.service.UserService;

import javax.servlet.*;
import javax.servlet.http.*;
import java.io.IOException;
import java.sql.SQLException;

public class CheckUserServlet2 extends HttpServlet {
    private UserService userService = new UserService();

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request, response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/json;charset=utf-8");//指定MIME类型为json
        Gson gson = new Gson();
        //接收jquery发送的ajax数据
        String username = request.getParameter("username");//参数名取决于前端的参数名
        //到数据库中查找有无重名用户
        try {
            User userByName = userService.getUserByName(username);
            //如果有返回的就是一个User对象，如果没有，返回的就是null
            response.getWriter().print(gson.toJson(userByName));
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }
}

前端html页面使用4.5.4的$.getJSON()方法发送ajax请求，在4.5.4代码的基础上修改返回数据的判断条件即可：

测试结果：

amp JSON gt lt ajax jQuery

有关day35-JSON&Ajax03的更多相关文章

ruby-on-rails - rails : "missing partial" when calling 'render' in RSpec test - 2
我正在尝试测试是否存在表单。我是Rails新手。我的new.html.erb_spec.rb文件的内容是:require'spec_helper'describe"messages/new.html.erb"doit"shouldrendertheform"dorender'/messages/new.html.erb'reponse.shouldhave_form_putting_to(@message)with_submit_buttonendendView本身，new.html.erb，有代码:当我运行rspec时，它失败了:1)messages/new.html.erbshou
ruby-on-rails - 由于 "wkhtmltopdf"，PDFKIT 显然无法正常工作 - 2
我在从html页面生成PDF时遇到问题。我正在使用PDFkit。在安装它的过程中，我注意到我需要wkhtmltopdf。所以我也安装了它。我做了PDFkit的文档所说的一切......现在我在尝试加载PDF时遇到了这个错误。这里是错误:commandfailed:"/usr/local/bin/wkhtmltopdf""--margin-right""0.75in""--page-size""Letter""--margin-top""0.75in""--margin-bottom""0.75in""--encoding""UTF-8""--margin-left""0.75in""-
ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2
我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗？当我运行compasswatch时，它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行？文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们？我自己编译的.sass文件编译成compiled/t
ruby-on-rails - 如何从 format.xml 中删除 <hash></hash> - 2
我有一个对象has_many应呈现为xml的子对象。这不是问题。我的问题是我创建了一个Hash包含此数据，就像解析器需要它一样。但是rails自动将整个文件包含在.........我需要摆脱type="array"和我该如何处理？我没有在文档中找到任何内容。最佳答案我遇到了同样的问题；这是我的XML:我在用这个:entries.to_xml将散列数据转换为XML，但这会将条目的数据包装到中所以我修改了:entries.to_xml(root:"Contacts")但这仍然将转换后的XML包装在“联系人”中，将我的XML代码修改为
ruby - 检查 "command"的输出应该包含 NilClass 的意外崩溃 - 2
为了将Cucumber用于命令行脚本，我按照提供的说明安装了arubagem。它在我的Gemfile中，我可以验证是否安装了正确的版本并且我已经包含了require'aruba/cucumber'在'features/env.rb'中为了确保它能正常工作，我写了以下场景:@announceScenario:Testingcucumber/arubaGivenablankslateThentheoutputfrom"ls-la"shouldcontain"drw"假设事情应该失败。它确实失败了，但失败的原因是错误的:@announceScenario:Testingcucumber/ar
ruby-on-rails - Rails 3.2.1 中 ActionMailer 中的未定义方法 'default_content_type=' - 2
我在我的项目中添加了一个系统来重置用户密码并通过电子邮件将密码发送给他，以防他忘记密码。昨天它运行良好(当我实现它时)。当我今天尝试启动服务器时，出现以下错误。=>BootingWEBrick=>Rails3.2.1applicationstartingindevelopmentonhttp://0.0.0.0:3000=>Callwith-dtodetach=>Ctrl-CtoshutdownserverExiting/Users/vinayshenoy/.rvm/gems/ruby-1.9.3-p0/gems/actionmailer-3.2.1/lib/action_mailer
ruby-on-rails - 如何优雅地重启 thin + nginx？ - 2
我的瘦服务器配置了nginx，我的ROR应用程序正在它们上运行。在我发布代码更新时运行thinrestart会给我的应用程序带来一些停机时间。我试图弄清楚如何优雅地重启正在运行的Thin实例，但找不到好的解决方案。有没有人能做到这一点？最佳答案 #Restartjustthethinserverdescribedbythatconfigsudothin-C/etc/thin/mysite.ymlrestartNginx将继续运行并代理请求。如果您将Nginx设置为使用多个上游服务器，例如server{listen80;server
ruby - 在 jRuby 中使用 'fork' 生成进程的替代方案？ - 2
在MRIRuby中我可以这样做:deftransferinternal_server=self.init_serverpid=forkdointernal_server.runend#Maketheserverprocessrunindependently.Process.detach(pid)internal_client=self.init_client#Dootherstuffwithconnectingtointernal_server...internal_client.post('somedata')ensure#KillserverProcess.kill('KILL',
ruby - 主要 :Object when running build from sublime 的未定义方法 `require_relative' - 2
我已经从我的命令行中获得了一切，所以我可以运行rubymyfile并且它可以正常工作。但是当我尝试从sublime中运行它时，我得到了undefinedmethod`require_relative'formain:Object有人知道我的sublime设置中缺少什么吗？我正在使用OSX并安装了rvm。最佳答案或者，您可以只使用“require”，它应该可以正常工作。我认为“require_relative”仅适用于ruby1.9+ 关于ruby-主要:Objectwhenrun
ruby - 无法让 RSpec 工作—— 'require' : cannot load such file - 2
我花了三天的时间用头撞墙，试图弄清楚为什么简单的“rake”不能通过我的规范文件。如果您遇到这种情况:任何文件夹路径中都不要有空格!。严重地。事实上，从现在开始，您命名的任何内容都没有空格。这是我的控制台输出:(在/Users/*****/Desktop/LearningRuby/learn_ruby)$rake/Users/*******/Desktop/LearningRuby/learn_ruby/00_hello/hello_spec.rb:116:in`require':cannotloadsuchfile--hello(LoadError) 最佳

day35-JSON&Ajax03

JSON&Ajax03

4.jQuery的Ajax请求

4.1jQuery Ajax操作方法

4.2$.ajax()方法

4.3$.get()和$.post()请求

4.3.1$.get()

4.3.2$.post()

4.4$.getJSON()方法

4.5应用实例

4.5.1$.ajax()应用实例

4.5.2$.get()应用实例

4.5.3$.post()应用实例

4.5.4$.getJSON()应用实例

4.6练习

有关day35-JSON&Ajax03的更多相关文章

随机推荐

4.3`$.get()`和`$.post()`请求