没有任何输入的页面如何在不刷新的情况下提交表单？

Question

我已经在脚本中预定义了所有内容。我想要做的是，当我点击 SUBMIT 时，它会在不刷新页面的情况下完成工作。目前它刷新页面并显示“正在工作”。我想做的是这样的：

这是我的代码：

    <?php
$url="http://google.com";

if(isset($_POST["submit"])){

    $ch = curl_init("$url");
    curl_setopt($ch, CURLOPT_NOBODY, true);
    curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
    curl_exec($ch);
    $retcode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
    curl_close($ch);
    if (200==$retcode) {
        echo "working";
    } else {
       echo "failed";
    }
}
?>

<form action='ping.php'  method='post'><input type="submit"   name="submit"></form>



<script src="plugins/jQuery/jquery-2.2.3.min.js"></script>



       <script type="text/javascript">
            var $url =  '<?php echo $url ?>';
            $('#submit').click(function(e){

        e.preventDefault();

        var $this = $(this);
        $.get($url,function(data){
            $this.text('Success');
        });
    });
                </script>

编辑：

上例中的脚本显示错误：

[请求]已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。

所以我打算用 PHP cURL 来做。如果有人知道任何解决方案，请帮助。

Answer 1

我不是PHP专家，但我认为这一行

var $url =  '<?php echo $url ?>';

将呈现为 html 为

var $url = 'http://google.com';

这意味着您正在尝试从您自己的域对 google 的网站进行 XHR 调用。这就是您收到 CORS 错误的原因。

我认为您实际上是在尝试使用 PHP 作为代理与 Google 通信（应该可以正常工作）。

如果您在上面粘贴的代码名为ping.php，那么<form> 上的操作看起来就像是连接到自身的POST。

您需要做的唯一更改是以下...

<form action='ping.php' method='post'>
  <button>PING</button>
</form>


<script type="text/javascript">

  // Use the `submit` event on the form instead of the click event on the button. 
  // It's good practice for this sort of thing.

  $('form').on('submit', function(e){

    e.preventDefault();



    var form = $(this);
    var button = form.find('button');

    // Set the button text to 'working'
    button.text('Working...');

    var url = form.attr('action');
    $.get(url, function(data) {
      button.text('Success');
    });
  });
</script>

Answer 2

我不是 javascript 专家，但是当您尝试进行跨域调用时，您应该将 dataType 设置为 jsonp 并将 crossDomain 设置为 true。像这样：

$.ajax({
    url: 'HTTP://THE_URL',
    type: 'GET',
    crossDomain: true,
    dataType: 'jsonp',
    success: function() { alert("Success"); },
});

我可能错了：）

Answer 3

正如其他人所提到的，Access Control Allow Origin 错误是CORS 问题。这是因为 AJAX 请求指向 $url 中的 url（即http://google.com）。相反，通过使用 $.post() 而不是 $.get() 来使用代码顶部的 curl 请求（即 if(isset($_POST["submit"])){...）。帖子的 URL 应该是 PHP 页面（即 pong.php？）。在下面的代码示例和demo（请参阅此答案的结尾）中，它使用PHP_SELF（即$_SERVER['PHP_SELF']）作为将POST请求发送到的url。它在 POST 数据中传递了 $url（.post() 的第二个参数。另外，我们需要使用 .val() 来更新按钮的文本（见下面的注释）。

var $url =  '<?php echo $_SERVER['PHP_SELF']; ?>';
$('#submit').click(function(e){
    e.preventDefault();
    var $this = $(this);
    $.post($url,{url: "<?php echo $url;?>"}, function(data){
        //see note below about using .text()
        //$this.text('Success');
        $this.val('Success');
     });
});

另外，正如我在评论中提到的，没有具有 id 属性的元素 submit 所以点击处理程序永远不会被执行。为了更新提交按钮上的文本，给它一个值并使用.val()更新值。

• 添加id和value属性：

  <input type="submit" id="submit"  name="submit" value="Submit"> 
  

• 在成功回调中使用.val()：

   $this.val('Success');
  

在this PHPFiddle 中查看演示。

另一个可以使用的函数是 .load() - 它仍然容易出现 CORS 问题，但至少可以调用 callback function。