javascript - 使用 Jquery 显示来自 Ajax 响应的数据

Question

我正在尝试学习如何使用 jquery 显示来自 Ajax 响应的数据

这是返回到控制台的内容

Object {type: "success", message: "Your message has been sent, thank you.", record: Object}
record: Object
account_number: "1234567812345678"
balance: "1234"
bank_name: "test name"
customer_id: "12345"
id: 49
monthly: "123456"

这是将它带到控制台的当前脚本:

jQuery(document).ready(function($) {
  $('form.quform').Quform({
    successStart: function (response) {
      console.log(response); 

这是我尝试过的方法，但它不起作用，当您在底部添加额外的右括号时，它会阻止 AJAX 工作，但如果您将其取下，它不会执行任何操作:

jQuery(document).ready(function($) {
    $('form.quform').Quform({
        successStart: function (response) {
            var r = response.record;
            var html = '<li>Acct#: ' + r.account_number + '</li><li>Balance: ' + r.balance + '</li><li>Bank: ' + r.bank_name + '</li><li>Customer#: ' + r.customer_id + '</li>';
            $("#ulID").html(html);
        }
    });
});

请注意，我已将 <div id="ulID"></div> 添加到页面中，因为我认为这是显示它所需要的

Answer 1

我必须承认我不熟悉您使用 ajax 获得“响应”的方式你在查询网络服务吗？我也不熟悉 Quform 插件，你应该在你的问题中说明你正在使用插件。

但无论如何我都会尽力帮助你。由于您的问题要求显示来自 Ajax 响应的数据，我假设您正在查询 Web 服务并尝试帮助您解决这个假设下面是在不使用插件的情况下使用 Ajax 调用 Web 服务的代码。

$.ajax({
    url: 'webservice url',
    type: "POST",
    data: "{}",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (data) {
            alert('Success!');
        $('.ulID').text('response was: ' + data.d)
    },
    failure: function (msg) { 
                alert('an error occured'); 
        }
});

该 url 是指向 web 服务的链接，数据包含 web 服务所需的任何参数。

据我所知，这是使用 Ajax 查询网络服务的正确方法。

如果您想获得关于您已有代码的帮助，我建议您从问题中删除 Ajax 并将其替换为 Quform。但老实说，JQuery 中的 Ajax 调用非常简单，除非您打算将该插件用于其他用途，否则我会放弃该插件。

顺便说一句:此设置要求 web 服务支持 json

希望对你有帮助