首页 > 其他分享 >1_jQuery.ajax()的简单使用

1_jQuery.ajax()的简单使用

时间:2023-01-05 23:56:25浏览次数:40  
标签:jQuery resp new ajax Student 简单 import servlet javax

  

每次书写AJAX代码比较繁琐 步骤都是一样的,数据回显使用原生js代码也比较繁琐,可以使用jQuery对上述问题进行优化,jQuery不仅仅对dom操作进行了封装 同时也对AJAX提交和回显已经进行了封装,可大大简化AJAX的操作步骤

 

jQuery.ajax()的简单使用

基本语法为(经典语法):

前端代码  

 

<html>
<head>
    <title>$Title%sSourceCode%lt;/title>
    <meta charset="UTF-8"/>
    <script src="js/jquery.min.js"></script>
    <script>
        function checkUname(){
            // 获取输入框中的内容
            if(null == $("#unameI").val() || '' == $("#unameI").val()){
                $("#unameInfo").text("用户名不能为空");
                return;
            }
            $("#unameInfo").text("");
            // 通过jQuery.ajax() 发送异步请求
            $.ajax(
                    {
                        type:"GET",// 请求的方式 GET  POST
                        url:"unameCheckServlet.do?", // 请求的后台服务的路径
                        data:"uname="+$("#unameI").val(),// 提交的参数
                        success:function(info){ // 响应成功执行的函数
                            $("#unameInfo").text(info)
                        }
                    }
            )
        }
    </script>
</head>
<body>
<form action="myServlet1.do" >
    用户名:<input id="unameI" type="text" name="uname" onblur="checkUname()">
    <span id="unameInfo" style="color: red"></span><br/>
    密码:<input type="password" name="pwd"><br/>
    <input type="submit" value="提交按钮">
</form>
</body>
</html>

 

后台代码

package com.msb.servlet;
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 java.io.IOException;
/**
 * @Author: Ma HaiYang
 * @Description: MircoMessage:Mark_7001
 */
@WebServlet("/unameCheckServlet.do")
public class UnameCheckServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String uname = req.getParameter("uname");
        String info="";
        if("msb".equals(uname)){
            info="用户名已经占用";
        }else{
            info="用户名可用";
        }
        // 向浏览器响应数据
        resp.setCharacterEncoding("UTF-8");
        resp.setContentType("text/html;charset=UTF-8");
        resp.getWriter().print(info);
    }
}
 

JSON格式处理

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.min.js"></script>
    <script>
        function testAjax(){
            // 向后台发送一个ajax异步请求
            // 接收响应的数据
            $.ajax(
                {
                    type:"GET",
                    url:"servlet1.do",
                    data:{"username":"zhangsan","password":"123456"},// key=value&key=value  {"属性名":"属性值"}
                    dataType:"json",//以什么格式接收后端响应给我们的信息
                    success:function(list){
                        $.each(list,function(i,e){
                            console.log(e)
                        })
                    }
                }
            )
        }
    </script>
</head>
<body>
<input type="button" value="测试" onclick="testAjax()">
</body>
</html>
 

后台代码

 

package com.msb.servlet;
import com.google.gson.Gson;
import com.google.gson.GsonBuilder;
import com.msb.pojo.Student;
import sun.util.calendar.LocalGregorianCalendar;
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 java.io.IOException;
import java.util.ArrayList;
import java.util.Collections;
import java.util.Date;
/**
 * @Author: Ma HaiYang
 * @Description: MircoMessage:Mark_7001
 */
@WebServlet("/servlet1.do")
public class Servlet1 extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String username = req.getParameter("username");
        String password = req.getParameter("password");
        System.out.println(username);
        System.out.println(password);
        Student stu1=new Student("小黑","男",10,new Date());
        Student stu2=new Student("小白","男",10,new Date());
        Student stu3=new Student("小黄","男",10,new Date());
        Student stu4=new Student("小花","男",10,new Date());
        ArrayList<Student> list =new ArrayList<>();
        Collections.addAll(list,stu1,stu2,stu3,stu4);
        GsonBuilder gb =new GsonBuilder();
        gb.setDateFormat("yyyy-MM-dd");
        Gson gson = gb.create();
        String json = gson.toJson(list);
        resp.setContentType("text/html;charset=UTF-8");
        resp.setCharacterEncoding("UTF-8");
        resp.getWriter().print(json);
    }
}

 

 

标签:jQuery,resp,new,ajax,Student,简单,import,servlet,javax
From: https://www.cnblogs.com/2324hh/p/17029183.html

相关文章

  • 2_jQuery.ajax()属性介绍
    ​   jQuery.ajax()属性详解$.ajax()方法中有很多属性可以供我们使用,其中很多属性都有默认值,那么这些属性都有哪些,处理的是什么事情?接下来给大家一一介绍一下1.......
  • 2_jQuery.ajax()属性介绍
    ​   jQuery.ajax()属性详解$.ajax()方法中有很多属性可以供我们使用,其中很多属性都有默认值,那么这些属性都有哪些,处理的是什么事情?接下来给大家一一介绍一下1.......
  • 2_AJAX介绍
    AJAX介绍 AJAX即“AsynchronousJavascriptAndXML”(异步JavaScript和XML),是指一种创建交互式、快速动态网页应用的网页开发技术,无需重新加载整个网页的情况下,能够......
  • 2_AJAX介绍
    AJAX介绍 AJAX即“AsynchronousJavascriptAndXML”(异步JavaScript和XML),是指一种创建交互式、快速动态网页应用的网页开发技术,无需重新加载整个网页的情况下,能够......
  • [leetcode]第 16 天 排序(简单)、第 17 天 排序(中等)
    面试题45.把数组排成最小的数思路使用到了快速排序classSolution{publicStringminNumber(int[]nums){//初始化字符串数组String[]strs......
  • jQuery Mobile 高级设计模板
    来自:​​http://www.adobe.com/cn/devnet/dreamweaver/articles/dw-template-jquery-mobile.html​​下载:​​template_14-jquery-mobile-app.zip​​jQueryMobile是一款......
  • 10个你必须知道的jQueryMobile代码片段
    0、jQueryMobile生命周期函数必须在 jQueryMobile脚本加载之前声明,否则会完全不起作用!拿“mobileinit”来说,我一开始的时候这样写,坑爹的是jqm根本没有任何反应!<script......
  • ATC简单题解(不定时更新
    ABC129前三题略D.lamp虽然数据范围不大,但也没法暴力check,可以考虑分别维护每行(每列)障碍物的纵(横)坐标,可以考虑到插入std::vector中,然后对于每一个点查找横竖方向上的......
  • 使用jQuery Mobile快速开发手机站点
    来自:​​http://brooky.cc/2011/04/18/jquery-mobile-for-fast-mobile-website-development/​​ 當你看著Apple的iOSdevice和Android各自來勢洶洶,不知道到底該讓你......
  • 8个jQuery Mobile基础教程
    1. ​​jQueryMobile入门介绍​​  2. ​​jQueryMobile基本教程​​  3. ​​jQueryMobile开发简单应用​​  4. ​​jQueryMobile高级教程-RSS阅读器应......