JQuery对Ajax的三种封装

最新推荐文章于 2023-06-27 16:51:14 发布

抬头丨丨微笑^_^

最新推荐文章于 2023-06-27 16:51:14 发布

阅读量1.7k

点赞数

文章标签： ajax jquery javascript

本文链接：https://blog.csdn.net/DSL95/article/details/122999313

版权

JQuery对Ajax的三种封装

针对于get请求：其中参数可以写成“name=zs&age=22”这种形式，也可以写成json的格式

$.get("需要访问的Servlet的名称", { 参数1：值，参数2：值，... },
          function(data){
          alert("回调函数: " + data);
});

针对于post请求：其中参数可以写成“name=zs&age=22”这种形式，也可以写成json的格式

$.post("需要访问的Servlet的名称", { name: "John", time: "2pm" },
          function(data){
          alert("回调函数: " + data);
          });

针对于所有请求均可使用，但其内部必须指明请求方式，type为请求类型，url为需要访问的Servlet的名称，data为传输参数，success为请求成功后回调函数，请求失败回调函数使用error，如果失败成功均需回调时，使用complete。

$.ajax({
   type: "POST",
   url: "some.php",
   data: "name=John&location=Boston",
   success: function(msg){
     alert( "回调函数: " + msg );
   }
});

代码展示

index.jsp代码展示：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>查询学生</title>
    //引用CDN网络版JQuery
    <script
            src="https://code.jquery.com/jquery-1.12.4.js"
            integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
            crossorigin="anonymous"></script>
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <script type="text/javascript">
        $(function(){
             $("#btn").click(function () {
                 $.ajax({
                     type:"get",
                     url:"queryStu",
                     success:function (data) {
                         eval("var info=" + data);
                         //更新到页面中
                         var tb = $("#tb");
                         for (var i = 0; i < info.length; i++) {
                             tb.append("<tr>" +
                                 "<td>"+info[i].stuNo+"</td>" +
                                 "<td>"+info[i].stuName+"</td>" +
                                 "<td>"+info[i].stuSex+"</td>" +
                                 "<td>"+info[i].stuAge+"</td>" +
                                 "</tr>");
                         }

                     }
                 })
             })
         })
    </script>

</head>
<body>
<input type="button" id="btn" value="查询全部">
<br><br>
<hr>
<table border="1px" cellspacing="0px" cellpadding="10px">
    <thead>
    <tr>
        <td>学号</td>
        <td>姓名</td>
        <td>性别</td>
        <td>年龄</td>
    </tr>
    </thead>
    <tbody id="tb">
    </tbody>

</table>
</body>
</html>

Servlet代码：

package indi.dsl.servlet;

import com.google.gson.Gson;
import indi.dsl.entry.Student;
import indi.dsl.service.Query;
import indi.dsl.service.QueryImpl;

import javax.jws.WebService;
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.List;

@WebServlet("/queryStu")
public class MyServlet extends HttpServlet {
    Query service = new QueryImpl();

    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //设置请求编码格式
        req.setCharacterEncoding("UTF-8");
        //设置响应编码格式
        resp.setCharacterEncoding("UTF-8");
        resp.setContentType("text/html,charset=utf-8");
        //处理请求
        try {
            List<Student> list = service.query();
            for (Student stu : list) {
                System.out.println(stu.getStuNo() + "," + stu.getStuName());
            }
            resp.getWriter().write(new Gson().toJson(list));
        } catch (Exception e) {
            e.printStackTrace();
        }

    }
}

Service端代码：

package indi.dsl.service;

import indi.dsl.dao.QueryStudent;
import indi.dsl.dao.QueryStudentImpl;
import indi.dsl.entry.Student;

import java.util.List;

public class QueryImpl implements Query{
    QueryStudent queryStudent = new QueryStudentImpl();
    @Override
    public List<Student> query() throws Exception {
        return queryStudent.queryStudent();
    }
}

DAO层代码：

package indi.dsl.dao;

import indi.dsl.entry.Student;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;

public class QueryStudentImpl implements QueryStudent {

    @Override
    public List<Student> queryStudent() throws Exception {
        List<Student> list = new ArrayList<>();
        //加载驱动
        Class.forName("oracle.jdbc.driver.OracleDriver");
        //获取链接
        Connection con = DriverManager.getConnection("jdbc:oracle:thin:@127.0.0.1:1521:orcl", "scott", "root");
        //创建sql
        String sql = "select * from student";
        //获取sql执行对象
        PreparedStatement pre = con.prepareStatement(sql);
        //执行sql获取结果集
        ResultSet resultSet = pre.executeQuery();
        while (resultSet.next()) {
            Student stu = new Student();
            stu.setStuNo(resultSet.getInt("stuNo"));
            stu.setStuName(resultSet.getString("stuName"));
            stu.setStuSex(resultSet.getString("stuSex"));
            stu.setStuAge(resultSet.getInt("stuAge"));
            list.add(stu);
        }


        return list;
    }
}

结果展示：

抬头丨丨微笑^_^

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JQuery对Ajax的三种封装

JQuery对Ajax的三种封装针对于get请求：其中参数可以写成“name=zs&age=22”这种形式，也可以写成json的格式$.get("需要访问的Servlet的名称", { 参数1：值，参数2：值，... }, function(data){ alert("回调函数: " + data);});针对于post请求：其中参数可以写成“name=zs&age=22”这种形式，也可以写成json的格式$.post("需要访问的
复制链接

扫一扫