表单中的ajax,然后jquery显示填充的表单字段

时间:2022-11-28 15:14:45

I have a form that requires a physical address. Once the user enters the full address, I have a button that says "Verify address". I want to be able to click that button, trigger an ajax call that will call a file in the server which will get the longitude and latitude of that address, then return to the form with those coordinates, and display a div with them. Dont worry about figuring out the coordinates. Im just trying to figure out the whole ajax call and jquery display upon response from the server. Thanks

我有一个需要物理地址的表单。一旦用户输入完整地址,我就会出现一个“验证地址”的按钮。我希望能够单击该按钮,触发ajax调用,该调用将调用服务器中的文件,该文件将获取该地址的经度和纬度,然后返回带有这些坐标的表单,并显示div。不要担心找出坐标。我只是想在服务器响应时弄清楚整个ajax调用和jquery显示。谢谢

So, I did this to have things working:

所以,我这样做是为了让事情有效:

$(document).ready(function() {

//if verify button is clicked
$('#verify').click(function () {

    var address = $('input[name=address]');
    var city    = $('input[name=city]');
    var state   = $('input[name=state]');
    var zip     = $('input[name=zip]');
    var country = $('select[name=country]');

    //organize the data for the call
    var data = 'address=' + address.val() + '&city=' + city.val() + '&state=' + state.val() + '&zip='  + zip.val() + '&country='  + country.val();

    //start the ajax
    $.ajax({
        url: "process.php",
        type: "GET",
        data: data,
        cache: false,
        success: function (html) {

            //alert (html);

            if (html!='error') {

                //show the pin long and lat form
                $('.form2').fadeIn('slow');

            } else alert('Error: Your location cannot be found');
        }
    });

    //cancel the submit button default behaviours
    return false;
});
});

process.php returns the longitude and latitude back in a variable as: "longitude,latitude". How do I access that data back in the front end so I can populate the form fields with it? Thanks a lot for the great responses.

process.php将经度和纬度返回到变量中:“经度,纬度”。如何在前端访问该数据,以便我可以用它填充表单字段?非常感谢您的回复。

2 个解决方案

#1


1  

I hope this is helpful. This would be a generic AJAX call to a php page:

我希望这是有帮助的。这将是对php页面的通用AJAX调用:

$.ajax({
            type: "POST",
            url: "scripts/process.php",
            data: "type=query&parameter=" + parameter,
            success: function (data) {  //Called when the information returns
                if(data == "success"){
                  //Success
                } else {
                  //Fail
                }
            },
            error: function () {
                  //Complete failure
            }
        });

#2


0  

The jQuery function you need is jQuery.get().

您需要的jQuery函数是jQuery.get()。

You can find other details here: http://api.jquery.com/category/ajax/ Sorry for the scarce details but you haven't provided source code.

您可以在这里找到其他详细信息:http://api.jquery.com/category/ajax/对于稀缺的细节很抱歉,但您没有提供源代码。

#1


1  

I hope this is helpful. This would be a generic AJAX call to a php page:

我希望这是有帮助的。这将是对php页面的通用AJAX调用:

$.ajax({
            type: "POST",
            url: "scripts/process.php",
            data: "type=query&parameter=" + parameter,
            success: function (data) {  //Called when the information returns
                if(data == "success"){
                  //Success
                } else {
                  //Fail
                }
            },
            error: function () {
                  //Complete failure
            }
        });

#2


0  

The jQuery function you need is jQuery.get().

您需要的jQuery函数是jQuery.get()。

You can find other details here: http://api.jquery.com/category/ajax/ Sorry for the scarce details but you haven't provided source code.

您可以在这里找到其他详细信息:http://api.jquery.com/category/ajax/对于稀缺的细节很抱歉,但您没有提供源代码。