jQuery AJAX简单应用

最新推荐文章于 2022-09-08 21:08:12 发布

涛痕

最新推荐文章于 2022-09-08 21:08:12 发布

阅读量399

点赞数 1

分类专栏： javascript 涛痕世界文章标签： ajax jquery 数据交互前端实例

本文链接：https://blog.csdn.net/iamcgt/article/details/72886270

版权

涛痕世界同时被 2 个专栏收录

56 篇文章 0 订阅

订阅专栏

javascript

19 篇文章 0 订阅

订阅专栏

简介

通过 HTTP 请求加载远程数据。

jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。

发送数据到服务器

默认情况下，Ajax请求使用GET方法。如果要使用POST方法，可以设定type参数值。这个选项也会影响data选项中的内容如何发送到服务器。

数据类型

（1）$.ajax()函数依赖服务器提供的信息来处理返回的数据。如果服务器报告说返回的数据是XML，那么返回的结果就可以用普通的XML方法或者jQuery的选择器来遍历。如果见得到其他类型，比如HTML，则数据就以文本形式来对待。

（2）通过dataType选项还可以指定其他不同数据处理方式。除了单纯的XML，还可以指定 html、json、jsonp、script或者text。

（3）和xml类型返回的数据不会经过处理。数据仅仅简单的将XMLHttpRequest的responseText或responseHTML属性传递给success回调函数，

（4）如果指定为html类型，任何内嵌的JavaScript都会在HTML作为一个字符串返回之前执行。类似的，指定script类型的话，也会先执行服务器端生成JavaScript，然后再把脚本作为一个文本数据返回。

（5）如果指定为json类型，则会把获取到的数据作为一个JavaScript对象来解析，并且把构建好的对象作为结果返回。

基本语法

封装属性

需要封装的属性包括：

类型：type

地址：url

是否同步：async

参数：data

请求数据类型：dataType

请求成功回调函数：success

请求失败回调：error

这里写图片描述

框架分析

属性	说明
常用的属性包括	type、url、async、data、dataType、jsonp、success、error
type	请求类型，取值包括：post/get
url	请求连接地址
async	是否异步执行，取值包括：true/false(同步/异步)
data	请求的参数，格式：param=value¶m=value
dataType	响应值类型，取值包括：xml/html/script/json/jsonp/text
jsonp	跨域请求时候，重置请求回调函数名称
success/error	响应成功需要执行的回调函数/相应失败需要执行的回调函数

简单应用

客户端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.1.min.js"></script>
</head>
<body>
<script>
    $(document).ready(function () {
        var data = {
            type:"get",
            url:"Servlet",
            async:true,
            data:"name=cgt&psd=123",
            dateType:"json",
            success:function (data) {
                console.log("收到数据:"+data);
            },
            error:function () {
                console.log("出问题了");
            }
        };
        $.ajax(data);
    })

</script>
</body>
</html>

服务器端

package com.test.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;

/**
 * Created by cgt on 2017/6/3.
 */
@WebServlet("/Servlet")
public class Servlet extends HttpServlet {
    @Override
    public void init() throws ServletException {
        System.out.println("成功连接到Servlet");
    }
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("doGet");
        resp.setCharacterEncoding("UTF-8");
        resp.getWriter().write("已成功以GET方法连接");
        String name = req.getParameter("name");
        String psd = req.getParameter("psd");
        System.out.println("name="+name);
        System.out.println("psd="+psd);

    }

   @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
       System.out.println("doPost");
       resp.setCharacterEncoding("UTF-8");
       resp.getWriter().write("已成功以POST方法连接");
       String name = req.getParameter("name");
       String psd = req.getParameter("psd");
       System.out.println("name="+name);
       System.out.println("psd="+psd);
    }
}

运行结果

客户端

这里写图片描述

服务器端

这里写图片描述

原生AJAX

可以参考我的另一篇博客——AJAX
http://blog.csdn.net/iamcgt/article/details/72857872

IntelliJ IDEA部署Servlet

可以参考我的另一篇博客——IntelliJ IDEA部署Servlet
http://blog.csdn.net/iamcgt/article/details/72851756

IntelliJ IDEA配置Tomcat

可以参考我的另一篇博客——IntelliJ IDEA配置Tomcat
http://blog.csdn.net/iamcgt/article/details/72848187

涛痕

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery AJAX简单应用

简介通过 HTTP 请求加载远程数据。jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。发送数据到服务器默认情况下，Ajax请求使用GET方法。如果要使用POST方法，可以设定type参数值。这个选项也会影响da
复制链接

扫一扫

专栏目录