jquery帖子两次发布?

时间:2011-09-20 04:20:11

标签: jquery android android-webview

我正在使用jquery帖子,不知何故,似乎帖子被发布了两次。我正在Android Broswer上测试这个。很有线。有人知道为什么吗?这是一个jquery bug还是什么?

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <script type="text/javascript" src="vendor/jquery-1.5.js"></script>
    <title>Test Runners</title>
</head>
<body>

<h1>Test Runner</h1>
<script type="text/javascript">
    post_result = function() {
        console.log("post_result is called!");
        $.post( 'http://192.168.2.3:8001',  { 'jasmine-url' : "test url" ,'jasmine-content' : "test content" } )
            .success(function() { alert("second success"); return true; })
            .error(function() { alert("error"); return true; })
            .complete(function() { alert("complete"); return true; });
    }
</script>
<a href="javascript:post_result()">post result</a>
</body>
</html>

更多信息:

对原帖进行了一些更改。

实际上在Chrome中,我们首次发出请求时只发出了两个请求,一个是OPTION方法,另一个是POST。

但是在Android浏览器上,相同的代码每次都会发出两个POST请求。我认为使用Android浏览器的JQUERY可能有些问题。有谁知道这个吗?

1 个答案:

答案 0 :(得分:2)

不确定为什么它会发布两次,但我注意到你的代码有几个问题。

首先,我们已经过了内联JavaScript并且在href - 属性中执行JavaScript是一个很大的禁忌(这里有onclick属性,但那是你应该做的另一个恐龙'触摸)。有很多优秀的JavaScript框架可以很容易地绑定到诸如click之类的事件。

其次,您的post_result函数被定义为全局且缺少分号。

要解决上述问题,请将以下代码段放在头部或单独的文件中。它会做同样的事情,但是遵循良好的做法以更加jQuery的方式。

<强>的JavaScript

// Short-hand for DOM-ready
$(function(){
    // Define variable in local scope to store request
    var request;

    // Bind to the click event to all anchors with the class post-results
    $("a.post-results").click(function(e){
        // Prevent default behavior. I.e. stop browser from navigating
        e.preventDefault();

        // If there's a previous request, abort it. No need for two.
        // You could also return here if you want to wait for the first
        // one to finish.
        if (request) { request.abort(); }

        // Let's fire off the request and store it for future reference
        request = $.post(
                'http://192.168.2.3:8001',
                {
                    "jasmine-url": "test url",
                    "jasmine-content": "test content" 
                }
            )
            .success(function(res) {
                console.log("second success", res);
            })
            .error(function(xhr, err) {
                console.log("error", err);
            })
            .complete(function() {
                console.log("complete");
                // Set request var to null
                request = null;
            });
    });
});

<强> HTML

<a class="post-results" href="#">Post result</a>

为了确保正确加载jQuery,您应该从已建立的公共CDN(例如Google Libraries API)加载它。

我还建议您跳转到HTML5 doctype,它与HTML4向后兼容。只需将您的doctype切换为<!DOCTYPE html>,就可以了。