js补充--jQuery AJAX的介绍

什么都不想456

已于 2024-02-17 17:15:30 修改

阅读量325

点赞数 4

分类专栏： js学习分享文章标签： javascript jquery ajax

于 2024-02-17 15:45:27 首次发布

本文链接：https://blog.csdn.net/qq_59430243/article/details/136138834

版权

js学习分享专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、什么是 AJAX？

AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。

使用 AJAX 的应用程序案例：谷歌地图、腾讯微博、优酷视频、人人网等等。

2、关于 jQuery 与 AJAX

jQuery 提供多个与 AJAX 有关的方法。

通过 jQuery AJAX 方法，可以使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。

提示：如果没有 jQuery，AJAX 编程还是有些难度的。

编写常规的 AJAX 代码并不容易，因为不同的浏览器对 AJAX 的实现并不相同。这意味着我们必须编写额外的代码对浏览器进行测试。不过，jQuery 团队为我们解决了这个难题，我们只需要一行简单的代码，就可以实现 AJAX 功能。

3、AJAX的使用

$.ajax({
        url:"Login",
        type:"get",
        data:{
              account:$(".account").val(),
              password:$(".password").val()
        },
        //接收结果
        success:function(data){
              alert("返回的帐号是"+data.account+",返回的密码是："+data.password)
              console.log(data)
              alert(data.account)
        }
})

其中

1、url:" "的参数为自己创建的Servlet文件的 @WebServlet("/Login") 名，

2、type:" "的参数为自己选择使用的方法

3、data:{ }

为自己从前端获取传往后端的参数

4、success:function(data){ }

为接收结果的方法

4、使用举例

第一步，在eclipse中创建自己的项目文件：

首先在WebContent下创建自己的HTML文件：（index.html）注意自己导入js的路径

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jQuery.js"></script>
    <script>
        $(function(){
            $(".btn").on("click",function(){
                $.ajax({
                    url:"Login",
                    type:"get",
                    data:{
                        account:$(".account").val(),
                        password:$(".password").val()
                    },
                    //接收结果
                    success:function(data){
                    	alert("返回的帐号是"+data.account+",返回的密码是："+data.password)
                        console.log(data)
                        alert(data.account)
                    }
                })
            })
        })
    </script>
</head>
<body>
	第一个项目<br>
	账号：<input type="text" class="account" name="" id=""><br>
	密码：<input type="text" class="password" name="" id=""><br>
    <input type="button" class="btn" value="提交" name="" id=""><br>
</body>
</html>

然后创建这样的Servlet文件

内容如下：

package test.servlet;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class Login
 */
@WebServlet("/Login")
public class LoginServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public LoginServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		//修改编码
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		response.setContentType("json/text;charset=utf-8");
		//获取数据
		String account = request.getParameter("account");
		String password = request.getParameter("password");
		//模拟逻辑
		System.out.println("从前端获取的账号是"+account);
		System.out.println("从前端获取的密码是"+password);
		account = account+"你好";
		String res = "{\"account\":\""+account+"\",\"password\":\""+password+"\"}";
		
		//响应给前端
		response.getWriter().write(res);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

其中doGet和doPost里面的内容放错位置也没关系，注意里面的 doGet(request, response); 代码即可