博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jQuery用于请求服务器的函数
阅读量:6935 次
发布时间:2019-06-27

本文共 4225 字,大约阅读时间需要 14 分钟。

post方法

jQuery为我们包装简化了常用的请求方法,其中有一个post方法,此方法可以通过 HTTP POST 请求从服务器载入数据。

语法:

jQuery.post(url,data,success(data, textStatus, jqXHR),dataType);

jQuery用于请求服务器的函数

该方法实际上是简写的 Ajax 方法,等价于:

$.ajax({  type: 'POST',  url: url,  data: data,  success: success,  dataType: dataType});

以下使用一个简单的示例演示一下post方法的使用:

服务端代码:

import org.json.JSONObject;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.io.PrintWriter;import java.util.Date;import java.util.HashMap;@WebServlet("/login")public class LoginServlet extends HttpServlet {    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {        req.setCharacterEncoding("utf-8");        String username = req.getParameter("username");        String password = req.getParameter("password");        // 声明返回的数据类型为json格式        resp.setContentType("application/json;charset=utf-8");        PrintWriter printWriter = resp.getWriter();        String date = new Date().toLocaleString();        if (username == null || password == null || password.trim().equals("") || username.trim().equals("")) {            System.out.println("账户或密码为空!" + date);            resp.sendError(500);            return;        }        HashMap
hashMap = new HashMap(); if (username.equals("lisi") && password.equals("123456a")) { System.out.println("登录成功!" + date); hashMap.put("response", "success!"); } else { System.out.println("用户名或密码不正确!" + date); hashMap.put("response", "username or password error!"); } printWriter.write(new JSONObject(hashMap).toString()); printWriter.close(); }}

客户端代码:

html代码:

    
Title

js代码:

function post_request() {    // 第二个参数是json格式的    $.post("login", {        "username": $("input[name='username']").val(),        "password": $("input[name='password']").val()    }, function (data, state) {        // 根据服务端返回的json格式得值,所以需要data.response        alert("data: " + data.response);        alert("state: " + state)    });}

运行结果:

jQuery用于请求服务器的函数
jQuery用于请求服务器的函数

虽然以上实验已经可以成功的请求服务器并且载入了服务器返回的数据,但是将表单信息转换成json格式的那一段代码还是复杂了一些,每个表单组件的数据都得单独的去获得,如果表单中有十来个组件的话,岂不得写十来句代码去逐个获得。所以这时候就得用到一个可以将表单数据序列化成json格式的神器:jquery.serializeJSON,这是一个基于jQuery的开源插件,以下是该插件的下载地址:

使用该插件后,一句代码就可以解决表单数据序列化成json格式的问题,修改后的代码:

html代码:

    
Title

js代码:

function post_request(formObj) {    // 只需要提供表单对象,就可以序列化该表单中的数据为json格式    $.post("login", $(formObj).serializeJSON(), function (data, state) {        alert("data: " + data.response);        alert("state: " + state)    });}

服务端代码依旧不变,运行结果:

jQuery用于请求服务器的函数
jQuery用于请求服务器的函数

get方法

get和post在使用上基本上是一样的,这是一个简单的 GET 请求功能以取代复杂 \$.ajax 。请求成功时可调用回调函数。如果想要在出错时执行函数,则需要使用 $.ajax。

语法:

$(selector).get(url,data,success(response,status,xhr),dataType)

jQuery用于请求服务器的函数

同样的该函数也是简写的 Ajax 函数,等价于:

$.ajax({
url: url, data: data, success: success, dataType: dataType});

示例:

服务端代码只需要把doPost改为doGet即可。
html代码:

    
Title

js代码:

function get_request(formObj) {    $.get("login", $(formObj).serializeJSON(), function (data, state) {        alert("data: " + data.response);        alert("state: " + state)    });}

运行结果:

jQuery用于请求服务器的函数
jQuery用于请求服务器的函数

思维导图:

jQuery用于请求服务器的函数

AJAX方法

ajax方法是 jQuery 底层的 AJAX 实现,而以上介绍的get和post方法则是ajax方法的简写,ajax方法会返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数,除非你需要操作不常用的选项,以获得更多的灵活性。

最简单的情况下,ajax() 可以不带任何参数直接使用。
提示:所有的选项都可以通过 $.ajaxSetup() 函数来进行全局设置。

语法:

jQuery.ajax({settings...})

jQuery用于请求服务器的函数

下面的表格中列出了可能的键/值:

jQuery用于请求服务器的函数

示例,服务端代码不变:

html代码:

    
Title

js代码:

function ajax_request(formObj) {    $.ajax({        type: "post",  // 指定请求方式        url: "login",        async: true,  // 开启异步        data: $(formObj).serializeJSON(),        success: function (result, state) {  // 回调函数            alert("result: " + result);            alert("state: " + state);        },        dataType: "json"     });}

运行结果:

jQuery用于请求服务器的函数
jQuery用于请求服务器的函数

本文转自 ZeroOne01 51CTO博客,原文链接:http://blog.51cto.com/zero01/2058342,如需转载请自行联系原作者

你可能感兴趣的文章
【NOIP】提高组2016 天天爱跑步
查看>>
leetcode 322. Coin Change
查看>>
QRCode 二维码开源DLL(源码修改为支持中英文混合)
查看>>
ITBOOK在线阅读-TOOLFK工具网
查看>>
周记1
查看>>
[译] 在 Keras 下使用自编码器分类极端稀有事件
查看>>
Js窗口嵌套
查看>>
ubuntu16.04 ROS安转及RVIZ启动
查看>>
[转]servlet中的service, doGet, doPost方法的区别和联系
查看>>
2017-01-05
查看>>
FS系统开发设计(思维导图)
查看>>
org.hibernate.AnnotationException: @OneToOne or @ManyToOne on com.demo.pojo.IdCard
查看>>
数据库中文乱码问题
查看>>
(转载)DWZ用svn进行版本控制与团队开发
查看>>
Java的值传递和引用传递
查看>>
客户端组建调用
查看>>
波屯毒鸡汤1
查看>>
面向对象课程第三次总结性博客作业
查看>>
python多线程编程-queue模块和生产者-消费者问题
查看>>
tomcat9启动后控制台输出乱码问题
查看>>