解决jquery发送ajax请求失败

jquery发送请求出现跨域问题解决

在这里插入图片描述
上述是我在做注册做用户添加时侯的报错,注意这里做的时post请求,get请求作者没有产生跨域问题。
然后经过查了一些资料,大部分是说在前端通过一个回调去解决,但是尝试了很久,依旧没有效果。
然后我就采用了在后端添加拦截器的方式解决了问题。

  • 下面是我的工作目录
    在这里插入图片描述
  • 代码
package com.itheima.interceptor;

import org.springframework.http.HttpMethod;
import org.springframework.web.servlet.HandlerInterceptor;
import org.springframework.web.servlet.ModelAndView;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class CorsInterceptor implements HandlerInterceptor {


    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {

        //表示接受任意域名的请求,也可以指定域名
        response.setHeader("Access-Control-Allow-Origin",request.getHeader("origin"));
        //该字段可选,是个布尔值,表示是否可以携带cookie
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Methods", "GET, HEAD, POST, PUT,PATCH, DELETE, OPTIONS");
        response.setHeader("Access-Control-Allow-Headers", "*");

        if (HttpMethod.OPTIONS.toString().equals(request.getMethod())){
            return  true;
        }
        return true;
    }

    @Override
    public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) throws Exception {

    }

    @Override
    public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) throws Exception {

    }
}
package com.itheima.interceptor;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class InterceptorConfig implements WebMvcConfigurer {


    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        /**
         * 拦截全部路径,跨域放到最上面
         */
        registry.addInterceptor(new CorsInterceptor()).addPathPatterns("/**");
        //拦截哪些路径


        WebMvcConfigurer.super.addInterceptors(registry);
    }
}


在解决了跨域问题后,又出现了一个问题,就是在我发送post请求后,给我返回了一个null值,那么对于这个问题我是下面这样解决的

jquery post请求返回空值的结局

  • 产生这种原因,无非就是没有采用正确的ajax请求方式,作者踩了很多坑,找到了一种可行的请求方式
$.ajax({
                async: false,
                cache: false,
                type: 'POST',
                url: 'http://localhost:92/personalInfo/b',
                dataType: "json",
                contentType: 'application/json', //第二步:定义格式
                data: JSON.stringify(data), //第二步;把json转为String传递给后台
                error: function () {
                    alert('请求失败 ');
                },
                success: function (data) {
                    console.log(data);
                    //alert(data);
                }
            });
  • 重点关注一下上面7个参数,至于具体代表,大家自行查阅资料
  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
css(name) 访问第一个匹配元素的样式属性。 -------------------------------------------------------------------------------- Return a style property on the first matched element. 返回值 String 参数 name (String) : 要访问的属性名称 示例 取得第一个段落的color样式属性的值。 jQuery 代码: $("p").css("color"); toggle(fn,fn) 每次点击时切换要调用的函数。 如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一元素时,则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。 可以使用unbind("click")来删除。 -------------------------------------------------------------------------------- Toggle between two function calls every other click. Whenever a matched element is clicked, the first specified function is fired, when clicked again, the second is fired. All subsequent clicks continue to rotate through the two functions. Use unbind("click") to remove. 返回值 jQuery 参数 fn (Function) : 第奇数次点击时要执行的函数。 fn (Function) : 第偶数次点击时要执行的函数。 示例 对表格的切换一个类 jQuery 代码: $("td").toggle( function () { $(this).addClass("selected"); }, function () { $(this).removeClass("selected"); } ); ajaxSuccess(callback) AJAX 请求成功时执行函数。Ajax 事件。 XMLHttpRequest 对象和设置作为参数传递给回调函数。 -------------------------------------------------------------------------------- Attach a function to be executed whenever an AJAX request completes successfully. This is an Ajax Event. The XMLHttpRequest and settings used for that request are passed as arguments to the callback. 返回值 jQuery 参数 callback (Function) : 待执行函数 示例 当 AJAX 请求成功后显示消息。 jQuery 代码: $("#msg").ajaxSuccess(function(evt, request, settings){ $(this).append("<li>Successful Request!</li>"); }); jQuery.ajax(options) 通过 HTTP 请求加载远程数据。 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。 $.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该对象,但特殊情况下可用于手动终止请求。 注意: 如果你指定了 dataType 选项,请确保服务器返回正确的 MIME 信息,(如 xml 返回 "text/xml")。错误的 MIME 类型可能导致不可预知的错误。见 Specifying the Data Type for AJAX Requests 。 $.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息。详细参数选项见下。 jQuery 1.2 中,您可以跨域加载 JSON 数据,使用时需将数据类型设置为 JSONP。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。数据类型设置为 "jsonp" 时,jQuery 将自动调用回调函数。 -------------------------------------------------------------------------------- Load a remote page using an HTTP request. This is jQuery's low-level AJAX implementation. See $.get, $.post etc. for higher-level abstractions that are often easier to understand and use, but don't offer as much functionality (such as error callbacks). $.ajax() returns the XMLHttpRequest that it creates. In most cases you won't need that object to manipulate directly, but it is available if you need to abort the request manually. Note: If you specify the dataType option described below, make sure the server sends the correct MIME type in the response (eg. xml as "text/xml"). Sending the wrong MIME type can lead to unexpected problems in your script. See Specifying the Data Type for AJAX Requests for more information. $.ajax() takes one argument, an object of key/value pairs, that are used to initialize and handle the request. See below for a full list of the key/values that can be used. As of jQuery 1.2, you can load JSON data located on another domain if you specify a JSONP callback, which can be done like so: "myurl?callback=?". jQuery automatically replaces the ? with the correct method name to call, calling your specified callback. Or, if you set the dataType to "jsonp" a callback will be automatically added to your Ajax request. 返回值 XMLHttpRequest 参数 options (可选) : AJAX 请求设置。所有选项都是可选的。 选项 async (Boolean) : (默认: true) 默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。 beforeSend (Function) : 发送请求前可修改 XMLHttpRequest 对象的函数,如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。 Ajax Event. cache (Boolean) : (默认: true) jQuery 1.2 新功能,设置为 false 将不会从浏览器缓存中加载请求信息。 complete (Function) : 请求完成后回调函数 (请求成功或失败时均调用)。参数: XMLHttpRequest 对象,成功信息字符串。 Ajax 事件。 contentType (String) : (默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。 data (Object,String) : 发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组,jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。 dataType (String) : 预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息返回 responseXML 或 responseText,并作为回调函数参数传递,可用值: "xml": 返回 XML 文档,可用 jQuery 处理。 "html": 返回纯文本 HTML 信息;包含 script 元素。 "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。 "json": 返回 JSON 数据 。 "jsonp": JSONP 格式。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。 error (Function) : (默认: 自动判断 (xml 或 html)) 请求失败时调用时间。参数:XMLHttpRequest 对象,错误信息,(可能)捕获的错误对象。Ajax 事件。 global (Boolean) : (默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件,如 ajaxStart 或 ajaxStop 可用于控制不同的 Ajax 事件。 ifModified (Boolean) : (默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。 processData (Boolean) : (默认: true) 默认情况下,发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息,请设置为 false。 success (Function) : 请求成功后回调函数。参数:服务器返回数据,数据格式。 Ajax 事件。 timeout (Number) : 设置请求超时时间(毫秒)。此设置将覆盖全局设置。 type (String) : (默认: "GET") 请求方式 ("POST" 或 "GET"), 默认为 "GET"。注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持。 url (String) : (默认: 当前页地址) 发送请求的地址。 示例 加载并执行一个 JS 文件。 jQuery 代码: $.ajax({ type: "GET", url: "test.js", dataType: "script" }); -------------------------------------------------------------------------------- 保存数据到服务器,成功时显示信息。 jQuery 代码: $.ajax({ type: "POST", url: "some.php", data: "name=John&location=Boston", success: function(msg){ alert( "Data Saved: " + msg ); } }); -------------------------------------------------------------------------------- 装入一个 HTML 网页最新版本。 jQuery 代码: $.ajax({ url: "test.html", cache: false, success: function(html){ $("#results").append(html); } }); -------------------------------------------------------------------------------- 同步加载数据。发送请求时锁住浏览器。需要锁定用户交互操作时使用同步方式。 jQuery 代码: var html = $.ajax({ url: "some.php", async: false }).responseText; -------------------------------------------------------------------------------- 发送 XML 数据至服务器。设置 processData 选项为 false,防止自动转换数据格式。 jQuery 代码: var xmlDocument = [create xml document]; $.ajax({ url: "page.php", processData: false, data: xmlDocument, success: handleResponse });
jQuery.ajax( url, [ settings ] ) 返回: jqXHR 执行一个异步的HTTP(Ajax)的请求。 version added: 1.5jQuery.ajax( url, [ settings ] ) url一个用来包含发送请求的URL字符串。 settings一个以"{键:值}"组成的AJAX 请求设置。所有选项都是可选的。可以使用$.ajaxSetup()设置任何默认参数。看jQuery.ajax( settings )下所有设置的完整列表。 version added: 1.0jQuery.ajax( settings ) settings一个以"{键:值}"组成的AJAX 请求设置。所有选项都是可选的。可以使用$.ajaxSetup()设置任何默认参数。 acceptsMap 默认: 取决于数据类型 内容类型发送请求头,告诉服务器什么样的响应会接受返回。如果accepts设置需要修改,推荐在$.ajaxSetup()方法中做一次。 asyncBoolean 默认: true 默认设置下,所有请求均为异步请求(也就是说这是默认设置为true)。如果需要发送同步请求,请将此选项设置为 false。跨域请求和dataType: "jsonp"请求不支持同步操作。注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。 beforeSend(jqXHR, settings)Function 发送请求前可修改 jqXHR(在jQuery 1.4.x的中,XMLHttpRequest) 对象的函数,如添加自定义 HTTP 头等。该jqXHR和设置作为参数传递的。这是一个Ajax事件 。beforeSend行数返回的false将取消该请求。在jQuery 1.5, beforeSend选项将被访问,不管请求的类型。 cacheBoolean 默认: true, dataType为"script"和"jsonp"时默认为false 如果设置为 false ,浏览器将不缓存此页面。 complete(jqXHR, textStatus)Function, Array 请求完成后回调函数 (请求成功或失败之后均调用)。这个回调函数得到2个参数: jqXHR (in jQuery 1.4.x, XMLHTTPRequest) 对象和一个描述成功请求类型的字符串("success", "notmodified", "error","timeout", or "parsererror") 。在jQuery 1.5, complete设置可以接受一个函数的数组。每个函数将被依次调用。这是一个Ajax事件 。 contents(added 1.5)Map 一个以"{字符串:正则表达式}"配对的对象,用来确定jQuery将如何解析响应,给定其内容类型。 contentTypeString 默认: 'application/x-www-form-urlencoded' 发送信息至服务器时内容编码类型。默认值是"application/x-www-form-urlencoded",适合大多数情况。如果你明确地传递了一个content-type给 $.ajax() 那么他必定会发送给服务器(即使没有数据要发送)。数据将总是使用UTF-8字符集传递给服务器;你必须译码这适当的在服务器端。 contextObject 这个对象用于设置Ajax相关回调函数的上下文。也就是说,让回调函数内this指向这个对象(如果不设定这个参数,那么this就指向调用本次AJAX请求时传递的options参数)。比如指定一个DOM元素作为context参数,这样就设置了success回调函数的上下文为这个DOM元素。就像这样: $.ajax({ url: "test.html", context: document.body, success: function(){ $(this).addClass("done"); } });
jQuery是一种JavaScript库,ajax是一种能够向服务器端发送和接收请求的技术。在Web开发中,ajax技术可以让页面在不刷新的情况下向服务器请求数据,使得页面更加丰富和动态。 下面就是一个jQuery ajax请求的实例: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery Ajax Request</title> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <!--需要引入jQuery库--> <script> $(document).ready(function() { $("#btn").click(function() { //当按钮被点击时 $.ajax({ url: "data.php", //请求地址 data: {"name":"Tom", "age":18}, //请求参数 type: "post", //请求方式 dataType: "json", //返回值类型 success: function(result) { //请求成功时的回调函数 $("#result").html(result.name + "今年" + result.age + "岁"); //将返回值显示在页面上 }, error: function() { //请求失败时的回调函数 alert("请求失败"); } }); }); }); </script> </head> <body> <button id="btn">请求数据</button><br><br> <div id="result"></div> </body> </html> ``` 在这个实例中,我们使用了jQueryajax函数,这个函数有很多参数,其中一些常用的参数包括: - url:请求地址; - data:请求参数; - type:请求方式(常用的有get和post); - dataType:返回值类型(常用的有json和html); - success:请求成功时的回调函数; - error:请求失败时的回调函数。 在按钮被点击时,我们向服务器请求数据,服务器通过data.php来处理请求,并返回一个json格式的数据: ```php <?php $name = $_POST["name"]; $age = $_POST["age"]; $result = array("name" => $name, "age" => $age); echo json_encode($result); ?> ``` 当请求成功时,我们将返回的数据解析出来,并将其显示在页面上。如果请求失败,我们就弹出一个提示框。通过这个实例,我们可以学习到如何使用jQuery来进行ajax请求,以及如何处理请求成功和失败的情况。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

编程阿牛

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值