Question

在facebook iframe页面（不是标签页）中，我想使用cURL将数据发布到外部API，但我更喜欢我的表单页面没有重新加载。

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

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

更新代码返回错误 - 不提交表格数据。

<!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（或我的整个文件）会在提交时重新加载（并显示“成功”消息）。

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

Answer 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是服务器所需的数据类型。

通过cURL发送数据而无需重新加载页面

2 个答案: