Question

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

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

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

或许我不能和我必须使用ajax？

Answer 1

您需要2个事件来完成此任务。

执行Google地图请求的按钮的onClick事件并将数据保存到本地表单
您的表单的onSubmit事件。您将使用此事件来查看表单是否可提交。基本上，请检查以确保您的Google地图请求已经运行并已完成，然后才能提交表单。

示例：

<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>

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

用户填写表格
用户点击按钮在Google地图上执行操作（示例是在我知道GMaps请求的范围/上下文之前编写的，所以这就是为什么这样做了）
如果用户在GMap请求完成之前点击“提交”，我们会取消提交并设置标记submitWaiting
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地图API请求是通过javascript完成的

如果你的谷歌地图api请求没有使用谷歌地图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>

Answer 2

这基本上是不可能的 - PHP在服务器上运行，JavaScript在客户端上运行。您确实需要使用Ajax。

Answer 3

我担心AJAX是必须的。您需要将用户重定向到包含脚本的页面。

一旦服务器运行PHP以生成HTML，然后将其发送到浏览器，就无法再次运行它，或者确实从服务器运行任何内容，而无需向服务器发出请求。这就是服务器端脚本语言的本质，PHP就是这样。

Answer 4

您可以拥有一个隐藏的IFRAME元素，您可以在javascript结束后立即加载php文档。简单但有效（只要您的php文档来自相同的URL）。

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

4 个答案: