jQuery ajax + java servlet踩坑

首先，如果一直回调error的方法，可以先看看错误信息

error: function (XMLHttpRequest, textStatus, errorThrown) {
                        // 状态码
                        console.log(XMLHttpRequest.status);
                        // 状态
                        console.log(XMLHttpRequest.readyState);
                        // 错误信息
                        console.log(textStatus);
                    }

我所碰到的问题

1.URL问题

协议必须是http或者data等等，报错信息如下

Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

2.编码问题

servlet处理方法加上

resp.setContentType("text/html;charset=utf-8");

3.返回格式问题

java PrintWriter返回的内容格式必须和ajax的dataType格式对应
如dataType=“json”,那么PrintWriter就得返回json格式的字符串，jQuery会检测格式是否符合。
如果你只想返回一个字符串做做测试什么的，ajax写上dataType=”text"就行
ajax的dataType默认是json

预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如XML MIME类型就被识别为XML。在1.4中，JSON就会生成一个JavaScript对象，而script则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值:
“xml”: 返回 XML 文档，可用 jQuery 处理。
“html”: 返回纯文本 HTML 信息；包含的script标签会在插入dom时执行。
“script”: 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了"cache"参数。’’‘注意：’’'在远程请求时(不在同一个域下)，所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)
“json”: 返回 JSON 数据。
“jsonp”: JSONP 格式。使用 JSONP 形式调用函数时，如 “myurl?callback=?” jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
“text”: 返回纯文本字符串

参考文档：
http://hemin.cn/jq/jQuery.ajax.html

4.最后附上我之前用于测试的代码

jsp

<%@page language="java" pageEncoding="UTF-8" %>
<html>
<head>
    <title>ajax test</title>
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" :value="msg">
    <input type="button" @click="onButtonClick" value="戳我">
</div>
</body>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            msg:""
        },
        methods:{
            onButtonClick(){
                var that = this;
                $.ajax({
                    type:"GET",
                    dataType:"text",
                    url:"http://localhost:8080/ajax",
                    success(msg){
                        that.msg = msg
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        // 状态码
                        console.log(XMLHttpRequest.status);
                        // 状态
                        console.log(XMLHttpRequest.readyState);
                        // 错误信息
                        console.log(textStatus);
                    }
                })
            }
        }
    })
</script>
</html>

java servlet

package 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;
import java.io.PrintWriter;

@WebServlet("/ajax")
public class AjaxTestServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/html;charset=utf-8");

        PrintWriter pw = resp.getWriter();
        pw.println("啦啦啦");
        pw.flush();
        pw.close();
    }
}