通过 cURL 发送数据而不重新加载页面答案

【问题标题】：Send data via cURL without reloading page通过 cURL 发送数据而不重新加载页面
【发布时间】：2010-11-24 01:31:51
【问题描述】：

在 facebook iframe 页面（不是选项卡）中，我想使用 cURL 将数据发布到外部 API，但如果我的表单页面没有重新加载，我更愿意。

我希望发生一些 jquery ajax（提交表单时的“提交数据”消息和 curl_exec 成功时的成功消息）。我正在考虑创建一个带有重复表单的隐藏 iframe，并在更改事件时更新该表单中的值，但我不太清楚如何在 PHP 和 jquery 之间实现这种交换。

有没有更好的方法？这是我正在处理的代码：

更新代码以返回 FALSE -- 不提交表单数据。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>

<body class="fb_canvas-resizable <?php print $body_classes; ?>">
    <?php echo $message; ?>
    <div class="container">
        <div class="header"></div>
        <div class="wrapper">
            <div class="content">
                <div class="left">
                    <h1>Sign Up to Sign Off</h1>
                    <form name="signoff" action="curlsub.php" method="post">
                        <input id="api" type="hidden" name="API_KEY" value="key">
                    <div class="innerleft">
                        <input id="fname" type="text" name="fname" class="inputs" tabindex="1" /></br />
                        <label for="fname">First</label></br /></br /></br />
                        <input type="text" name="email" class="inputs" tabindex="3" /></br />
                        <label id="email" for="email">Email</label></br /></br /></br />
                        <label for="gender">Gender</label></br /></br />
                        <label for="gender">Age</label></br /></br /></br />
                        <label for="gender">Income</label></br /></br /></br />
                    </div>
                    <div class="innerright">
                        <input id="lname" type="text" name="lname" class="inputs" tabindex="2" /></br />
                        <label for="lname">Last</label></br /></br /></br />
                        <input id="password" type="password" name="password" class="inputs" tabindex="4" /></br />
                        <label for="email">Password</label></br /></br /></br />
                        <input type="radio" name="sex" value="male" selected="selected" tabindex="5" /> Male
                        <input type="radio" name="sex" value="female" tabindex="6" /> Female</br /></br />
                        <select name="age" tabindex="7" >
                            <option value=""></option>
                            <option value="baby">Baby</option>
                            <option value="teen">Teen</option>
                            <option value="young">Young</option>
                            <option value="old">Old</option>
                        </select><br /><br />
                        <select name="income" tabindex="8">
                            <option value=""></option>
                            <option value="none">None</option>
                            <option value="some">Some</option>
                            <option value="okay">Okay</option>
                            <option value="tons">Tons</option>
                        </select><br /><br />
                        <input id="zip" type="text" name="c5" class="zip" tabindex="9" /></br />
                        <label for="c5">Zip Code</label></br /></br />
                        <label for="mformat">Newsletter</label></br /></br />
                        <input type="checkbox" name="mformat" value="html" selected="selected" tabindex="10" /> HTML (iPhone, iPad, Droid)<br /><br />
                        <input type="checkbox" name="mformat" value="text" tabindex="11" /> TEXT (Best for Blackberry)
                    </div>
                    <div class="button"><input type="image" src="button.jpg" name="submit" value="yes"></div>
                    </form>
                </div>
                <div class="right">
                    <img src="logo.jpg" />
                    <p>Updating you on today and prepping you for tomorrow.</p>
                    <a href="http://www.url.com">www.url.com</a>
                </div>
                <div class="clear">
            </div>
            <div class="logged clear">
                <p>Logged in as Some Guy (<a href="#">not you?</a>)</p>
            </div>
        </div></div>
        <div class="footer"></div>
    </div>
    <script>
    $(document).ready(function() {
        //$('div.wrapper').fadeOut(0);
        window.fbAsyncInit = function() {
            FB.init({appId: 'app', status: true, cookie: true});
            FB.Canvas.setSize();
        };
        (function() {
            var e = document.createElement('script'); e.async = true;
            e.src = document.location.protocol +
            '//connect.facebook.net/en_US/all.js';
            document.getElementById('fb-root').appendChild(e);
        }());
    });
    $('#signoff').submit( function() {

        var fname = $("input#fname").val();
        var lname = $("input#fname").val();
        var email = $("input#email").val();
        var password = $("input#password").val();

        var dataString = 'fname='+ fname + '&lame=' + lname + '&email=' + email + '&password=' + password;
        // alert(dataString);
        // return false;

        $.ajax({
        type: "POST",
        url: "curlsub.php",
        data: dataString,
        success: function() {
            //do some stuff
        }
        });
        return false;
    });
    </script> 

</body>
</html>

目前这将成功地将数据发送到外部 PHP API，但 iframe（或我的整个文件）在提交时重新加载（并显示“成功”消息）。

【问题讨论】：

标签： php javascript ajax iframe facebook

【解决方案1】：

您要做的是在表单的提交事件上发出 AJAX Post 请求。该 AJAX Post 请求的成功回调应该会更新您的 UI，以提醒用户他们的帖子已成功。

$('#signoff').submit(
     //Ajax post request here
     //http://api.jquery.com/jQuery.post/
     return false;  //this stops your page from refreshing
);

【讨论】：

我更新了上面的代码只是为了测试提交时的刷新。还清爽吗？？一旦我在不刷新的情况下获取变量，$.ajax 方法应该可以正常工作。
删除该页面顶部的 PHP 代码，将其插入服务器上的另一个 php 脚本中。表单的 action 属性应该设置为这个新脚本的相对 url。
另外，您是否看到提交时发出了两个 http 请求，或者只是一个 FB 应用重新绘制？您的提交输入在哪里？您是否使用带有提交类型的输入标签来提交您的表单？
好的，我正在尝试从表单名称 attr 调用 jquery 函数：/ 将报告 ajax 调用！
嗯，我已经尝试实现ajax调用但数据没有提交。更新代码。

【解决方案2】：

你看过http://api.jquery.com/jQuery.ajax/或http://api.jquery.com/jQuery.post/

以下代码应该可以帮助您入门。

$.ajax({
  type: 'POST',
  url: url,
  data: data,
  success: success
  dataType: dataType
});

在哪里 url 是一个字符串，其中包含请求发送到的 URL。

data 是随请求发送到服务器的映射或字符串。

success是请求成功时执行的回调函数。它应该采用三个参数：(data, textStatus, XMLHttpRequest)

dataType 是服务器预期的数据类型。

【讨论】：