当URL中存在查询字符串时,Jquery表单提交不起作用

时间:2015-11-09 17:54:42

标签: javascript php jquery html jquery-mobile

测试场景:

  1. 在文本框中键入“hello”,您应该会在页面中看到“hello”
  2. 现在点击“测试”链接(它只是一个带有查询字符串&test=1的自身链接)
  3. 现在在文本框中输入“world”,您可以看到它不再在页面中写入。
  4. 为什么会这样?

    您可以在.php页面上测试此页面:

    <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    </head>
    <body>
    
        <form id="search_form" method="post">
            <label for="search">Search:</label>
            <input type="search" id="search" />
        </form>
    
        <script type="text/javascript">
    
            $('#search_form').submit(function (event) {         
                window.location.href = '<?=$_SERVER['PHP_SELF'].'?s='?>' + $('#search').val();
                event.preventDefault();
            });
    
        </script>   
    
        <br /><br />
    
        <?php $s = filter_input(INPUT_GET, 's'); ?>
    
        Query string: <?=$s?>
    
        <br /><br />
    
        <a href="<?=$_SERVER['PHP_SELF']?>?s=<?=$s?>&test=1">test</a>
    
    </body>
    </html>
    

    演示网址:(解决问题后删除)

1 个答案:

答案 0 :(得分:1)

由于您使用的是Jquery Mobile,因此默认情况下所有链接都是通过AJAX执行的。这会混淆你的这个剧本。我建议在链接中禁止这个。

<a href="<?=$_SERVER['PHP_SELF']?>?s=<?=$s?>&test=1" data-ajax="false">test</a>

这将允许链接被视为正常,并将在没有AJAX的情况下执行URL。