JavaWeb Ajax的使用

客行.

已于 2022-05-04 09:48:07 修改

阅读量1k

点赞数 4

文章标签： web ajax

于 2022-05-02 18:29:02 首次发布

本文链接：https://blog.csdn.net/m0_65725031/article/details/124543767

版权

今天主要是教大家Ajax的使用，从下一篇文章开始就开始教大家Bootsrtap噢，现在就开始进入我们今天的新知识点。

一.什么是Ajax?

Ajax是一门只刷新局部页面的技术。
AJAX 全称Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
Ajax即异步的 JavaScript 和 XML，是一种用于创建快速动态网页的技术。

异步和同步的概念：

异步：洗澡时喊别人帮我烧热水

同步：别人烧好热水我再去洗澡

二.为什么使用Ajax?

我们可以使用Ajax进行无刷新，无刷新是指不刷新整个页面，只刷新局部。

无刷新的好处: 只更新部分页面，有效利用带宽，提高用户体验

举例说明：我们原先写的什么购物车项目，当我们登录不成功以后会重新回到登录页面，而这时已经进行的刷新，导致登录界面我们原本输入的用户名，密码就不存在了，这样子给用户提供的体验感太差了，所以我们使用无刷新，就算当用户登录失败，原本的数据也存在输入框中。

三.Ajax基本使用

1.$.ajax()

常用参数	说明
url	一个用来包含发送请求的URL字符串(请求地址)
type	请求方式 (“POST” 或 “GET“[默认])
data	发送到服务器的数据(参数)
dataType	预期服务器返回的数据类型(xml、json、text)
success(data)	请求成功的回调函数
error	请求失败的回调函数

2.$.post()

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

常用参数	说明
url	一个用来包含发送请求的URL字符串(请求地址)
data	发送到服务器的数据(参数) key/value
success(data)	请求成功的回调函数
type	返回内容格式(xml、json、text等)

3.$.get()

该方法的使用和$.post()一致

常用参数	说明
url	一个用来包含发送请求的URL字符串(请求地址)
data	发送到服务器的数据(参数) key/value
success(data)	请求成功的回调函数
type	返回内容格式(xml、json、text等)

三种方法的使用代码如下：从代码中大家可以看到$.ajax的使用起来会稍微复杂些，其他两种相对来说简单些。

  $.ajax({
            url:"",
            type:"get|post",
            data:{},
            dataType:"",
            success(){}
        })


   $.get("url",data,fun(){},"text")
   $.post("url",data,fun(){},"text")

四.代码实操

完成登录的无刷新

后端代码：

package com.yjx.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

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

import com.yjx.biz.IGoodsBiz;
import com.yjx.biz.IUserBiz;
import com.yjx.biz.impl.GoodsBizImpl;
import com.yjx.biz.impl.UserBizImpl;
import com.yjx.pojo.Car;
import com.yjx.pojo.User;
/**
 * 实现登录功能
 * @author zjjt
 *
 */
@WebServlet("/login.do")
public class LoginServlet extends HttpServlet{
	
	IUserBiz userbiz=new UserBizImpl();
	
	IGoodsBiz goodsbiz=new GoodsBizImpl();
	
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doPost(req,resp);
	}
	
	
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		
		req.setCharacterEncoding("utf-8");
		String name=req.getParameter("uname");
		String pwd=req.getParameter("upwd");
		
		PrintWriter out=resp.getWriter();
		
		User u=new User();
		u.setName(name);
		u.setPwd(pwd);
	   User user=userbiz.login(u);
	   
	   System.out.print("hhhhhhhhhhh");
	    if(user!=null) {
	    	//将用户存入session中
	    	req.getSession().setAttribute("user", user);
	    	//进来的时候就给该用户一个购物车,将该购物车存在session中
	    	List<Car> car=new ArrayList<Car>();
	    	req.getSession().setAttribute("car",car);
	    	//总价
	    	req.getSession().setAttribute("sum", 0);
	    	out.print("yes");
	}else {
		   
		    out.print("no");
	}

	}
}

前端代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
<script src="bootstrap-3.3.7-dist/js/jquery-3.5.1.js"></script>
<script src="bootstrap-3.3.7-dist\js\bootstrap.js"></script>
<meta name="viewport" content="width=device-width,initial-scale=1">

<title>登录界面</title>
<script type="js/jquery-3.3.1.js"></script>
<style>
form {
	width: 500px;
	margin:auto;
}
</style>
</head>
<body>
	<div>
		<h1>登录</h1>
		<div class="form-group">
			<input id="uname" name="uname" class="form-control" placeholder="用户名">
		</div>
		<div class="form-group">
			<input id="upwd" name="upwd" class="form-control" placeholder="密码">
		</div>
		<div class="form-group">
			<button onclick="login()" class="btn btn-primary btn-block">登录</button>
		</div>
	</div>
    <script>
    
        function login(){
        	//拿到名字
        	let uname=$("#uname").val();
        	//拿到密码
        	let upwd=$("#upwd").val();
        	
        	//通过jQuery来发送请求ajax去后台login.do
        	
        	$.post(
        		//请求地址
        		"login.do",
        		//携带过去的数据，直接放数据，名字就是数据的名字
        		{uname,upwd},
        		//回调函数，请求之后会调用该函数
        		//resp是从login.do接收来的数据
        		function(resp){
        			if(resp.trim()==="yes"){
        				alert("登录成功");
        				//跳转界面
        				location.href = "index.do";
        			}else{
        				alert("登录失败");
        			}
        		},"text" 
        	//希望后台给我发送的是文本
        	)
        	
        	}
        
    
    
    </script>
        
</body>
</html>

今天的学习到此结束啦。

客行.

关注

4
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb Ajax的使用

今天是JavaWeb的最后一节课噢，今天主要是教大家Ajax的使用，从下一篇文章开始就开始教大家Bootsrtap噢，现在就开始进入我们今天的新知识点。目录一.什么是Ajax?二.为什么使用Ajax?三.Ajax基本使用 1.$.ajax()2.$.post()3.$.get()四.代码实操一.什么是Ajax?Ajax是一门只刷新局部页面的技术。 AJAX 全称Asynchronous JavaScript and XML（异步的 JavaS...
复制链接

扫一扫