Question

我创建了一个包含多个输入的表单，我需要从输入中提取这些值并使用ajax GET提交给API。我在构建我的ajax调用时遇到问题，并且还验证调用是否成功。我搜索并看到了＃34; GET＆＃34;结构化了几种不同的方式，需要知道哪种方式适当/何时使用不同的结构。

下面是我的表格

<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）除了＆＃34;警报＆＃34;和＆＃34; console.log＆＃34;我说，有没有其他方法可以看出通话是否成功？

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

提前致谢

Answer 1

试试这样：

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

Answer 2

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

只需检查按ctrl+I，然后在开发者模式下查找网络标签。所有发送到服务器的请求都将被找到。

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

},function(data){

  //callback sucess

},'json');

Answer 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();
    });
});

Answer 4

应使用数据发送

值，但语法错误。

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

Firebug，Firefox添加是一个很好的工具，可以查看对服务器的post / get调用以及返回的数据。对调试非常有用。 Chrome和IE有类似之处，但我发现Firefox和firebug最有用。

Answer 5

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

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。

使用JQUERY的适当的AJAX GET结构

5 个答案: