使用JQUERY获得适当的AJAX结构

我已经创建了一个包含多个输入的表单，我需要从输入中提取这些值，并使用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>

我有两个主要问题

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”之外，还有其他方法可以查看调用是否成功吗

我在这里创建了一个JSFIDLE

提前感谢

这样试试：

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

---

资源：

为什么不使用jquery的

$，.get

或

$。post

请求

只需按[code>ctrl+I进行检查，然后在开发人员模式下查找网络选项卡。在这里，将找到向服务器发出的所有请求

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

},function(data){

  //callback sucess

},'json');

---

在这里，您可以使用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();
    });
});

---

应使用数据发送值，但语法错误

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

---

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

你在这里做的手工太多了。这将做同样的工作：

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');
    }
});

---

是的，在成功回调中，您将返回结果，并知道调用成功。错误会导致回调

错误

嘿，请确保在fiddle ajax调用中去掉真正的域！谢谢David，谢谢Mattias，如果我需要合并“source=”怎么办？即使我使用了“serialize”函数，我也可以识别源代码吗？serialize（）只创建一个字符串，因此您可以附加/前置任何您喜欢的内容。另一种方法是将其添加到url的末尾。我的首选是在表单中添加一个隐藏的输入，并在调用serialize（）之前设置其值。如果希望将其作为json传递，可以将

contentType:'text/json'

和

data:json.stringify（$（'#target'））

添加到$.ajax（{}）中的结构中。

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');
    }
});