JS/AJAX：提交表单时没有按钮单击/页面刷新问题答案

【问题标题】：JS/AJAX: Submitting form without button click/page refresh issuesJS/AJAX：提交表单时没有按钮单击/页面刷新问题
【发布时间】：2012-07-12 22:37:54
【问题描述】：

我正在尝试提交视频 url 并返回没有页面刷新或按钮的嵌入代码。我有 js 函数，它将获取输入框的值。问题是，该函数不会提交将回显嵌入代码的表单。如何在不单击或刷新按钮的情况下提交表单，以便它可以回显 php 代码？

EXAMPLE

不刷新提交的JS：

            <script>
            $(document).ready(function() {
                                    var timer;
                                        $('#video-input1').on('keyup', function() {
                                            var value = this.value;

                                            clearTimeout(timer);

                                            timer = setTimeout(function() {

                                                //do your submit here
                                                $("#ytVideo").submit()

                                                alert('submitted:' + value);
                                            }, 2000);
                                        });


                 //submit definition. What you want to do once submit is executed
                  $('#ytVideo').submit(function(e){
                       e.preventDefault(); //prevent page refresh
                       var form = $('#ytVideo').serialize();
                       //submit.php is the page where you submit your form
                       $.post('index.php', form, function(data){ 


                       });
                  });

            });
            </script>

HTML

<html>
    <form  method="post" id="ytVideo" action="">
    Youtube URL:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input id="video-input1" type="text" value="<?php $url ?>" name="yurl">   
    </form>
</html>

PHP

  <?php

    if($_POST)
    {
        $url     = $_POST['yurl'];


        function getYoutubeVideoID($url) {
            $formatted_url = preg_replace('~https?://(?:[0-9A-Z-]+\.)?(?:youtu\.be/| youtube\.com\S*[^\w\-\s])([\w\-]{11})      
                    (?=[^\w\-]|$)(?![?=&+%\w]*(?:[\'"][^<>]*>| </a>))[?=&+%\w-]*~ix','http://www.youtube.com/watch?v=$1',$url);
            return $formatted_url;
        }
        $formatted_url = getYoutubeVideoID($url);
        $parsed_url = parse_url($formatted_url);




        parse_str($parsed_url['query'], $parsed_query_string);
        $v = $parsed_query_string['v'];

        $hth        = 300; //$_POST['yheight'];
        $wdth       = 500; //$_POST['ywidth'];


//Iframe code

echo htmlentities ('<iframe src="http://www.youtube.com/embed/'.$v.'" frameborder="0" width="'.$wdth.'" height="'.$hth.'"></iframe>');

}
?>

【问题讨论】：

标签： javascript jquery

【解决方案1】：

尝试在 .submit() 处理程序的末尾添加 return false：

$('#ytVideo').submit(function(e){
   ...
   $.post(..., function() {

   });

   return false; // add this
});

【讨论】：

我已将return false; 添加到提交处理程序的末尾，但没有实际提交\php 回显。您可以查看链接SITE的更新
无法连接到您提供的网址！
您可以通过 firebug 或 chrome 控制台查看您的发布请求是否正在发送？如果是这样，那就是您的 PHP 脚本中的问题。
是的，你说得对，正在执行的功能是任务。 IT一定是php的问题