zoukankan      html  css  js  c++  java
  • 使用jQuery发送POST,Ajax请求返回JSON格式数据

    问题:
    使用jQuery POST提交数据到PHP文件, PHP返回的json_encode后的数组数据,但jQuery接收到的数据不能解析为JSON对象,而是字符串{"code":-1,"msg":"123","data":[]}

    jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。

    jQuery $.get() 方法
    $.get() 方法通过 HTTP GET 请求从服务器上请求数据,在URL地址上可以看到传递的参数,一般用于传递少量数据。
    语法: $.get(URL,callback);
    详细语法:$(selector).get(url, data, success(response,status,xhr),dataType)

    jQuery $.post() 方法
    $.post() 方法通过 HTTP POST 请求从服务器上请求数据,在URL地址上不可以看到传递的参数,一般用于传递大量数据。
    语法:$.post(URL,data,callback);
    详细语法: jQuery.post(url,data,success(data, textStatus,jqXHR),dataType)

    查看$.post()详细的语法:
    jQuery.post(url,data,success(data, textStatus,jqXHR),dataType)
    你会发现,最后边有个参数 dataType,这个就是问题所在。
    这个dataType是可选参数,它规定预期的服务器响应的数据类型。默认执行智能判断(xml、json、script 或html)。

    详细说明
    该函数是简写的 Ajax 函数,等价于:
    $.ajax({
      type: 'POST',
      url: url,
      data: data,
      success: success,
      dataType: dataType
    });

    解决:

    $.post() 加上最后边的一个可选参数 dataType 为“json”类型


    示例:获得 test.php 页面返回的 json 格式的内容:
    $.post("test.php", { "func": "getNameAndTime" },
       function(data){
        alert(data.name); // John
        console.log(data.time); // 2pm
       }, "json");

    示例:获得 test.php 页面的内容,并存储为 XMLHttpResponse 对象,并通过 process() 这个JavaScript 函数进行处理:
    $.post("test.php", { name: "John", time: "2pm" },
       function(data){
        process(data);
       }, "xml");

    Struts2中对于后台向前端返回JSON格式数据一般使用以下方式:
    <span style="font-size:18px;">	public void writeJson2Resp(String json) throws IOException {
    		HttpServletResponse resp = ServletActionContext.getResponse();
    		resp.setCharacterEncoding("gbk");
    		resp.setContentType("text/html;charset=gbk");  //这一句没加入会导致乱码
    		PrintWriter out = resp.getWriter();
    		out.write(json);
    		out.flush();
    		out.close();
    	}</span>

    在 BaseAction 实现该方法,那么其他的 Action  只要继承了改类,就可以使用该方法向前台页面返回JSON格式数据

    参考链接:
    jQuery ajax 参考手册
    http://www.w3school.com.cn/jquery/jquery_ref_ajax.asp

    HTTP 方法:GET 对比 POST
    http://www.w3school.com.cn/tags/html_ref_httpmethods.asp

    jQuery ajax - post() 方法:
    http://www.w3school.com.cn/jquery/ajax_post.asp

    jQuery ajax - get() 方法
    http://www.w3school.com.cn/jquery/ajax_get.asp

  • 相关阅读:
    【专项学习】—— TypeScript基础语法入门
    【重点突破】—— React应用中封装axios(转)
    【重点突破】—— vue中Axios的封装和API接口的管理(转)
    【后台管理系统】—— 基础功能模块的开发之登录
    【后台管理系统】—— 通用部分的开发
    【后台管理系统】—— 开发环境的搭建之webpack的配置
    【重点突破】—— 三大框架对比Vue&React&Angular
    【大众点评】—— 首页开发
    【大众点评】—— 前端架构设计
    【重点突破】—— React Router 4:全新的React组件式的动态路由库
  • 原文地址:https://www.cnblogs.com/molashaonian/p/7242066.html
Copyright © 2011-2022 走看看