使用 JQUERY 的正确 AJAX GET 结构答案

【问题标题】：Proper AJAX GET structure using JQUERY使用 JQUERY 的正确 AJAX GET 结构
【发布时间】：2014-05-15 15:20:37
【问题描述】：

我创建了一个包含多个输入的表单，我需要从输入中提取这些值并使用 ajax GET 提交给 API。我在构建 ajax 调用以及验证调用是否成功时遇到问题。我已经搜索并看到“GET”的结构有几种不同的方式，需要知道哪种方式合适/何时使用不同的结构。

下面是我的表格

<form id="target" method="GET" enctype="multipart/form-data" >

<p>First Name: <input class="field" type="text" name="firstName" id="firstname" required></p> 

<p>Last Name: <input class="field" type="text" name="lastName" id="lastname" required> </p>

<p>Email: <input class="field" type="email" name="email" id="email" required></p>

<p>Zip Code:<input class="field" type="number" name="zip" id="zip" required></p>
<p class="small"><input type="checkbox" id="privacy" name="privacy" value="Agree" required>I certify that I am a U.S. resident over the age of 18, and I agree to the Privacy Policy</p>

这是我的 jquery 将表单值分配给变量和 ajax 调用

$(document.ready(function(){  ............


     $('#target').submit(function(event) {
    // get the form data

        var firstName = $('input[name=firstName]').val();
        var lastName  = $('input[name=lastName]').val();
        var email     = $('input[name=email]').val();
        var zip       = $('input[name=zip]').val();



    // process the form
    $.ajax({
        type        : 'GET',
        url         : 'http://test.XXXXXXX.com/x/x/x/x/x/x/.action?source=182081&firstName='+firstName+'&lastName='+lastName+'&email='+email+'&zip='+zip,
        dataType    : 'json',
        success: function(data){
    alert('successful');
  }

    })
        .done(function(data) {

            console.log(data); 

        });

    event.preventDefault();


    $('#banner-expanded').hide();
    $('#container1').hide();
    $('#thankyou').show();


});

我有两个主要问题..

1) ajax 调用的结构是否正确？我应该把 URL 和数据像这样分解吗？

        url         : 'http://test.XXXXXXX.com/api/event/form/optinNational.action?source=182081&
                    data            : firstName='+firstName+'&lastName='+lastName+'&email='+email+'&zip='+zip,

2）除了我放的“alert”和“console.log”，还有其他方法可以查看调用是否成功吗？

我在这里创建了一个 jsfiddle http://jsfiddle.net/33snB/5/

提前致谢

【问题讨论】：

你好，确保在你的 fiddle ajax 调用中去掉真实的域！
谢谢大卫，感激不尽

标签： jquery ajax forms get form-submit

【解决方案1】：

您在这里做了太多的体力劳动。这将做同样的工作：

var url =  'http://test.XXXXXXX.com/api/event/form/optinNational.action';
$.ajax({
    type        : 'GET',
    url         :  url,
    data: $('#target').serialize(),
    dataType    : 'json',
    success: function(data){
        alert('successful');
    }
});

是的，在成功回调中，您可以返回结果并知道调用有效。错误导致回调error。

【讨论】：

Mattias，如果我需要合并 'source=######' 怎么办？即使我使用了“序列化”功能，我还能识别来源吗？
serialize() 只是创建一个字符串，所以你可以附加/前置任何你喜欢的东西。另一种方法是将其添加到 url 的末尾。我的偏好是在表单中添加一个隐藏的输入，并在调用 serialize() 之前设置它的值。
如果您想将其作为 JSON 传递，您可以将 contentType: 'text/json' 和 data: JSON.stringify($('#target')) 添加到 $.ajax({}) 中的结构中。

【解决方案2】：

试试这样：

data : {
    source: 182081
    firstName: firstName,
    lastName: lastName,
    email: email,
    zip: zip,
},
url: 'http://test.XXXXXXX.com/api/event/form/optinNational.action

或将其缩减为：

data : $('#target').serialize()
url: 'http://test.XXXXXXX.com/api/event/form/optinNational.action

资源：Submit form using AJAX and jQuery

【讨论】：

【解决方案3】：

您可以在这里使用 jQuery 序列化函数来帮助您。这样的事情会起作用：

$('#target').submit(function(event) {
    event.preventDefault();
    var data = $('form').serialize();
    $.get('url', data, function(data){
        alert('successful');
        console.log(data);
        $('#banner-expanded').hide();
        $('#container1').hide();
        $('#thankyou').show();
    });
});

【讨论】：

【解决方案4】：

为什么不使用 jquery 的 $,.get 或 $.post 请求。

仅用于检查新闻ctrl+I 并在开发人员模式下查找网络选项卡。所有对服务器的请求都会被找到。

$.get(url,{
 firstname : firstname,
 lastname : lastname
 ...
 //etc all values here

},function(data){

  //callback sucess

},'json');

【讨论】：

【解决方案5】：

应该使用数据发送值，但您的语法错误。

data: { firstName: firstName, lastName: lastName, email: email, zip:zip },

Firebug 是一个 Firefox 插件，是查看对服务器的 post/get 调用和返回数据的绝佳工具。对调试非常有用。 Chrome 和 IE 有相似之处，但我发现带有 firebug 的 Firefox 最有用。

【讨论】：