在 HTML 页面中显示服务器响应数据答案

【问题标题】：Display Server Response Data onto HTML Page在 HTML 页面中显示服务器响应数据
【发布时间】：2014-03-12 10:31:08
【问题描述】：

目前我有一个能够接收数据并将数据发送到我的 HTML 网页的工作服务器。但是问题是我无法封装数据并将其显示为网页上的文本。

这是我的主体 HTML，我希望 id="response" 中的服务器响应数据：

<div id="content">
  <div>
     <img src="http://i.imgur.com/TMwitub.jpg" alt="" width="740" height="220" />
  </div>
  <div class="boxed" style="height: 35px">
    <h1>HOME</h1>
    <div id="response" style="height: 93px; left: 270px; top: 283px; width: 564px;">
    </div>  
  </div>
</div>

我会指出，成功功能之前的一切都有效。我的服务器能够接收 POST 并发送回以下 JSON 数据：

响应正文：

{
  "details": "Log in success",
  "clientInfo":{ "firstName": "AAA", "lastName": "BBB", "balance" : "9999", }
}

这是我的 JS（就绪功能正在运行 --- 一切正常，只是没有显示响应）：

$(document).ready(function(){
            var messageType = "3";
            var cookie_name = "username"; 
            var cookie_name2 = "password";
            var YouWrote = getName(cookie_name);
            var YouWrote2 = getName2(cookie_name2);
            var userName = YouWrote;
            var password = YouWrote2;
            auth(messageType, userName, password);
        });



function auth(messageType, userName, password) {
  $.ajax({
          type: "POST",
          //SEND TO SERVER URL
          url: "######",
          dataType: 'json',
          async: false,
          data: '{"messageType": "' + messageType + '",
                  "userName": "' + userName + '",
                  "password" : "' + password + '"}',
          error: function (xhr, error) {
                   alert('Error!');
          },
          success: function (data, textStatus, jqXHR) {
              $('#response').html(data.details + '\nHello ' + 
                                  data.clientInfo.firstName + ' ' +
                                  data.clientInfo.lastName + '. \nBalance:' +
                                  data.clientInfo.balance);
              }
         })
    }

我需要为 id = response 编写一些 CSS 吗？我不这么认为。我真的不知道为什么它不起作用，并希望得到一些帮助/建议。

【问题讨论】：

首先，async:false 在 1.8 以上的 jquery 中不起作用，那个 url ###### 是什么？
浏览器控制台显示什么错误？？？
我能知道你使用的是什么服务器端语言吗(eg:python,php,c#..)

标签： javascript jquery html json

【解决方案1】：

来自服务器的数据必须是字符串。类似：

 '{ "details": "Log in success", "clientInfo":{ "firstName": "AAA", "lastName": "BBB", "balance" : "9999"} }'

更多关于你为什么使用格式：

data: '{"messageType": "' + messageType + '",
 "userName": "' + userName + '", "password" : 
  "' + password + '"}',

你为什么不使用：

data: {"messageType": messageType,"userName":userName ,"password" :password},

【讨论】：

那不是问题。我刚刚调试。问题是用户名和密码未定义。
hmm...每次您必须首先检查浏览器控制台是否有 ajax 内容... :) @lancethestudent
我想我会关闭这个，因为我问的问题甚至无效。感谢您的帮助。

【解决方案2】：

对不起，我假设您的服务器端是 php。

服务器的响应标头是 JSON 格式吗？

header('Content-Type: application/json');

您的服务器端是否将您的数据编码为 json 或者您只是回应您的响应？

这样

echo json_encode($your_data);

也删除 async:false。

【讨论】：