jquery Ajax 通过jsonp的方式跨域提交表单

Posted 2020-08-15

　　Jquery Ajax可以通过jsonp的方式跨域提交表单，至于什么是跨域提交简单说就是你的客户端和服务端不在同一个域名下或端口号不同也可以叫做跨域。

前台代码：

$.ajax({
             type : ‘get‘,
             async: false,
             url : ‘${pageContext.request.contextPath}/clue/uploadForm‘,
             dataType : ‘jsonp‘,
             data: {
                         mydata : JSON.stringify(obj,fm),
                         formId : formId
                     },
             jsonp: ‘callbackparam‘,
             jsonpCallback:‘success_jsonpCallback‘,
             success : function(json){
                 //alert(json.message);
                 result = json.message;
             },
              error : function(json,XMLResponse){
                  //alert(XMLResponse.responseText+XMLHttpRequest.status);
                  result = "返回信息：" + json.message + "错误码：" + XMLHttpRequest.status;
             }
        });

后台代码：

/**
     * 提交form表单数据
     * @param request
     * @param session
     * @return
     * @throws IOException 
     */
    @RequestMapping(value ="uploadForm")
    public void uploadForm(HttpServletRequest request, HttpServletResponse response,HttpSession session) throws IOException{
        Map<String,Object> dataMap = new HashMap<String,Object>();
　　　　 dataMap.put("message","success");　　
         String callbackparam = request.getParameter("callbackparam");
        response.setCharacterEncoding("utf-8");
        JSONObject json = JSONObject.fromObject(dataMap);
        System.out.println(callbackparam+"("+ json.toString() + ")");
        response.getWriter().print(callbackparam+"("+ json.toString() + ")");
    }

注意：
1.通过jsonp方式跨域返回值不能为数据，其实为一段js代码，所以如果是springmvc，不能使用@ResponseBody注解。

2.返回值中要按照jsonp的格式，即callbackparam值加上“（）”，括号中为json字符串

3.前台代码中，jsonp属性中callbackparam为回调函数名称变量名，jsonpCallback属性为回调函数名称的值。