首页 > 其他分享> > Ajax的Jsonp跨域请求技术

Ajax的Jsonp跨域请求技术

2022-06-01 17:05:25 作者：互联网

Ajax的跨域请求

跨域获取用户写入数据

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="http://localhost:8060/JSON_war_exploded/jquery.min.js"></script>
		<script>
			function funmove(){
			            //id的属性用$("#id")获取
			            //判断她为空的话，给span一个文本发生
			            if (null== $("#userid").val()||''==$("#userid").val()){
			                 $("#spanid").text("用户名不能为空")
			                return
			            }
			            //这里是用户看到后进行输入，再次执行清空sqan的操作；就不执行if了
			            $("#spanid").text("")
			            //发送异步请求
			            $.ajax(
			                {
			                    type:"GET",//method的方式
			                    url:"http://localhost:8060/JSON_war_exploded/unameCheckServlet.do?",// 请求的后台服务的路径
			                    data:{username:$("#userid").val()},// 提交的参数
								dataType:"jsonp",
								jsonp:"aaa",
			                    success:function (msg) {// 响应成功执行的函数
			                        $("#spanid").text(msg)
			                    }
			                }
			            )
			        }
		</script>
	</head>
	<body>
		<form method="get" action="unameCheckServlet.do">
		    账号：<input id="userid" name="username" type="text" onblur="funmove()">
		    <span id="spanid" style="color: red"></span><br/>
		    密码：<input name="password" type="password"><br/>
		    <input type="submit" value="提交">
		</form>
	</body>
</html>

package com.msb;

import com.sun.net.httpserver.HttpServer;

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;
@WebServlet("/unameCheckServlet.do")
public class servlet extends HttpServlet {

    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String parameter = req.getParameter("username");
        System.out.println(parameter);//获取用户输入的数据
        String aaa = req.getParameter("aaa");//jsonp的跨域技术；aaa必须与定义的属性名一致
        String info= "";
        if (parameter==null||parameter==""){
            info="用户名不能为空";
        }else if ("msb".equals(parameter)){
            info="用户名已经被用";
        }
        resp.setCharacterEncoding("UTF-8");
        resp.setContentType("text/html;charset=UTF-8");
        resp.getWriter().println(aaa+"('"+info+"')");
    }
}

标签：aaa,跨域,parameter,Ajax,text,Jsonp,import,servlet,javax
来源： https://www.cnblogs.com/188221creat/p/16334812.html