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

目录

一.什么是Ajax?

二.为什么使用Ajax?

三.Ajax基本使用

1.$.ajax()

2.$.post()

3.$.get()

四.代码实操


一.什么是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();@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doPost(req,resp);}@Overrideprotected 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>

今天的学习到此结束啦。

JavaWeb Ajax的使用相关推荐

  1. java ajax刷新,javaweb ajax刷新

    javaweb ajax刷新 [2021-02-09 07:42:05]  简介: php实现无刷新点赞的方法:首先通过ajax index.php点击按钮:然后实现js反应:接着通过ajax异步提交 ...

  2. JavaWeb——AJAX(2)

    使用 JavaScript 和 Ajax 发出异步请求 本章节对JavaWeb--AJAX(1)中,XMLHttpRequest对象进行详解.从创建,请求到响应的整个过程. 1.XMLHttpRequ ...

  3. java ajax文字搜素,JAVA-WEB AJAX 搜索条自动提示

    jsp pageEncoding="UTF-8"%> 站内搜索 .xiala{ width: 100px; background-color: #fcfcfc; border ...

  4. JavaWeb Ajax二级联动Bootstrap的基本使用

    目录 一.Ajax二级联动 二.Bootstrap 基本使用

  5. JavaWeb.Ajax(异步数据请求)

    目录 什么是Ajax? 加载数据的方式 通过 HTTP 请求加载远程数据( $.ajax()) 通过远程 HTTP POST 请求载入信息($.post()/$.get()) 案例 使用Ajax完成无 ...

  6. Javaweb ajax实现分页

    一.所需jar包   fastjson-1.2.47.jar 二.所需js jquery-3.3.1.js 三.案例讲解 1.准备好数据库.实体类.dao方法等基础包类  注意不要写错  注意数据库连 ...

  7. Java理论知识及面试题

    一.springMVC 的工作(实现)原理? 工作原理 1.客户端发出一个http请求给web服务器,web服务器对http请求进行解析,如果匹配DispatcherServlet的请求映射路径(在w ...

  8. java判断时间区间 隔天_Java初中级程序员面试题宝典

    Java基础部分 &与&&区别? &和&&都是逻辑运算符,都是判断两边同时真则为真,否则为假:但是&&当第一个条件不成之后,后面的条件都 ...

  9. 需求分析-需求调研步骤和方法

    需求调研步骤和方法 第1章 前言目的 需求调研是为需要说明书做前期工作,可以说需要说明书说是从需求调研表中得到或抽取而出. 需求调研是要了解现实世界中做实际工作的人们真正需要什么样的程序的过程,再把这 ...

最新文章

  1. python画图中文显示_解决Linux系统中python matplotlib画图的中文显示问题
  2. spring6:bean的生命始末方法
  3. x5675相当于e5_至强X5675比I7 2600强多少 至强X5675相当于几个AMD X2 220
  4. SpringMVC 集成 mybatisPlus 分析
  5. icml 2014最佳论文_2014年最佳开放硬件
  6. Ubuntu 下 VirtualBox 调整vmdk虚拟硬盘分区
  7. python email 附件_使用python调用email模块实现附件发送
  8. 19.1.27 laravel框架学习笔记
  9. PLC指令系统的介绍
  10. 计算机组策略没有权限,运行组策略或程序时提示没有权限
  11. 激光电视和投影仪有什么区别
  12. nvidia旧版驱动_鸡血驱动已发布,可新买的显卡打不上驱动?这事儿别急
  13. scratch少儿编程课程是什么
  14. 培训-从学员的角度思考问题
  15. 你会正确卸载数据库吗?
  16. MySQL如何退出命令行
  17. 如何解决 vue 初始化页面闪动问题
  18. 南开计算机学院网络安全,程明明 - 南开大学 - 网络空间安全学院
  19. 撞库是什么意思?与洗库和拖库有什么关系?
  20. 农村房屋买卖带承包耕地协议是否有效

热门文章

  1. 原生html+css实现五星好评
  2. http常见状态返回码
  3. ES集群安全重启节点的正确方法
  4. CocoStudio基础教程(3)在程序中处理cocoStudio导出动画
  5. docker搭建mysql主从复制
  6. 学术论文如何撰写数据分析部分?
  7. eclipse中遇到的问题(2)
  8. 操作系统之虚拟化CPU(一)介绍
  9. 2007-2020年上市公司研发投入匹配数字化转型
  10. 使用c语言判断是闰年还是平年