php - 如何让 PHP 函数在 javascript 结束后运行？

Question

我有两个 PHP 函数 - 一个构建 html 表单，另一个在提交时处理它。

我想在 html 中添加一个 javascript onClick 函数，该函数将表单的一个字段发送到外部 API(Google map )并将回复保存在表单的隐藏字段中，以便处理 PHP 函数将获取该数据

我的问题是 - 如何确保处理 PHP 函数仅在 onClick 函数完成后触发？

或者我不能，我必须使用 ajax？

Answer 1

您需要 2 个事件来完成此操作。

1. 执行谷歌地图请求并将数据保存到本地表单的按钮的 onClick 事件
2. 表单的 onSubmit 事件。您将使用此事件来查看表单是否可提交。基本上，在允许提交表单之前检查以确保您的 google map 请求已运行并已完成。

例子:

<script>
var googleMapsDone = false;
$('#gmap_button').click(function(event)
{
    doGoogleMapThing(function()//callback from googlemaps
    {
        //save data to local form for processing by script once posted
        googleMapsDone = true;
    });
});

$('#form').submit(function(event)
{
    //check to see if we did our google maps stuff, and that its done
    if (false == googleMapsDone)
    {
        event.preventDefault();
        return false;
    }
});
</script>

使用该代码，任何时候用户在等待谷歌地图并点击提交时，都不会发生任何事情。他们必须等待 GMaps 的响应，然后单击提交。这对某些事情来说是可以的，但是如果你试图对不需要用户输入/交互/反馈的 GMaps 进行后台请求(可能在他们提交表单时获取他们地址的 Long/Lat)，那么你可以修改代码当你得到回应时要发布一点。一个例子是:

<script>
var googleMapsDone = false, submitWaiting = false;
$('#gmap_button').click(function(event)
{
    doGoogleMapThing(function()//callback from googlemaps
    {
        //save data to local form for processing by script once posted
        googleMapsDone = true;

        /* check to see if submitWaiting is TRUE.  If it is, automatically
           post the form when we get the response.
        */
        if (submitWaiting)
        {
            $('#form').submit();
        }
    });
});

$('#form').submit(function(event)
{
    //check to see if we did our google maps stuff, and that its done
    if (false == googleMapsDone)
    {
        event.preventDefault();

        /* set our submitWaiting flag which we will use in our clalback
           so when we get our google maps response, we post our form right
           away
        */
        submitWaiting = true;

        /* You might want to display a modal or some other kind of notification
           that the form post is 'working' or 'processing' so when the user
           clicks it and doesn't see anything happening, they don't bail
           or click it 800 times out of frustration
        */

        return false;
    }
});
</script>

编辑:我意识到我在下面关于这是如何工作的评论......很难理解，所以让我在这里解释一下，然后展示一个替代方案。

1. 用户填写表格
2. 用户点击按钮在谷歌地图上执行操作(示例是在我知道 GMaps 请求的范围/上下文之前编写的，所以这就是它以这种方式完成的原因)
3. 如果用户在 GMap 请求完成之前点击“提交”，我们将取消提交并设置标志 submitWaiting
4. GMaps 请求返回，并执行我们的回调。我们的回调知道如何查找 submitWaiting，如果它设置为 true，它会提交表单

替代方法是，您可以将事件更改为地址输入框的 onChange 事件，而不是要求用户交互 GMaps 请求，或者您可以通过提交按钮/事件完成所有操作，如下所示:

<script>    
$('#form').submit(function(event)
{
    //lets look up our user's address!
    doGoogleMapThing(function()//callback from googlemaps
    {
        //do stuff with your inputs, or whatever

        $('#form').submit();
    });

    event.preventDefault();
    return false;
});
</script>

编辑 注意:上面的示例假设您正在使用 jquery，并且您的 google map API 请求是通过 javascript 完成的

如果您的 google map api 请求没有使用 google maps javascript 库，这仍然是可能的，只需要您通过本地域上的 php 脚本为 API 创建一个“代理”脚本。 (浏览器限制)。它会是这样的:

<script>
function doGoogleMapThing(callback_when_done)
{
    $.post("/path/to/proxy/script.php", { data: to, post: to_server }, function(response)
    {
        //check & parse response
        callback_when_done(/* Data needed to populate form */);
    });
}
</script>

注意:这两个示例都假设使用了 jquery。因为……好吧……你为什么不呢。

下面是您的确切脚本的实现。我对其进行了一些更改以使用 jquery，因为它使事情变得不那么痛苦。

<script type=”text/javascript” 
    src=”http://maps.google.com/maps/api/js?sensor=false”></script>
<script type="text/javascript" 
    src="http://code.jquery.com/jquery-1.6.min.js"></script>

<script type=”text/javascript”>    
function codeAddress(callback)
{
    var address = $('#address').val();

    geocoder.geocode( { 'address': address}, function(results, status)
    {
        if (status == google.maps.GeocoderStatus.OK)
        {
             $('#latitude').val( results[0].geometry.location.latitude );
             $('#longitude').val( results[0].geometry.location.longitude );

             if (typeof callback != 'undefined') //call the callback.
             {
                 callback(true);
             }
        }
    });

    /* Just in case google returns a bad response or doesn't return at all
       we need to add a timeout that will call the callback after 10 seconds
       just so we make sure our user doesn't hang.
    */
    setTimeout(function(){
        callback(false); //pass false indicating no/invalid response
    }, 10000); //10000ms = 10s
}


/* We are using the reallySubmit variable as a flag here, to know when we finish
   our call to google maps and that we want to really submit our form.

   we have to do this because the form.submit() call fires the form's submit event
   again, and we end up going into an infinite loop.

   an alternative to this would be to bind your form processing to the form's submit
   button's click event. that should also pick up any presses of the enter key, also.
   the solution below also works.
*/
var reallySubmit = false;
$('#form').submit(function(event)
{
    if (false == reallySubmit)
    {
        //lets look up our user's address!
        codeAddress(function(success)//callback from googlemaps
        {
            reallySubmit = true;  
            $('#form').submit();
        });

        event.preventDefault();
        return false;
    }
});
</script>