AJAX發布請求和字符串連接

Question

我正在使用jQuery / AJAX來發布請求。 我正在嘗試從第一個文本框中獲取輸入，並將其與url連接起來，並在第二個文本框中顯示結果。 例如，如果用戶輸入asdf則ajax函數將發布該帖子，結果將顯示為http://www.example.com/sdf/ 。 我有兩個問題，如前所述，我有一個ajax函數，它正在執行發布，但在html中沒有顯示結果（它確實在firebug控制台中顯示）。 其次，如何將輸入連接到url中。 現場現場

<script>
$(document).ready(function () {
    var timer = null;
    var dataString;

    function submitForm() {
        $.ajax({
            type: "POST",
            url: "/concatenate/index.php",
            data: dataString,
            dataType: "html",
            success: function (data) {
                $("#result").html(data);
            }
        });
        return false
    }
    $("#input").on("keyup", function() {
        clearTimeout(timer);
        timer = setTimeout(submitForm, 40);
        var input = $("#input").val();
       dataString = { input : input }
    })
});
</script>
</head>
<body>

<h1>Enter a word:</h1>

<form action="create_entry.php" method="post">
Input: <input type="text" id="input" name="zipcode"></br>
Concatenated Result: <input type="text" id="result" name="location" value="http//www.example.com/ /" readonly></br>
</form>

Answer 1

我建議您將參數傳遞給submitForm而不是使用全局變量存儲數據。

要進行串聯，可以使用.data()方法存儲輸入的原始值，並始終獲取該原始值，然后向其添加新值。

 <!-- remove extra space and "/" -->
<input type="text" id="result" name="location" value="http//www.example.com/" readonly>

$(document).ready(function () {
    var timer = null;
   /* cache $("#result") and store initial url value*/
    var $result=$("#result");
     $result.data('url',$result.val());

    function submitForm( input ) {
        $.ajax({
            type: "POST",
            url: "/concatenate/index.php",
            data: {input:input},
            dataType: "html",
            success: function (data) {
                 /* new value from stored url and new user input*/
                var url=$result.data('url'),
                 newUrl= url+data;
                /* use val() not html() */
                $result.val(newUrl);
            }
        });
        return false
    }


    $("#input").on("keyup", function() {
        /* no point using "$("#input")" to search DOM again when already have "this"*/
        var input = $(this).val();
        clearTimeout(timer);
        timer = setTimeout(function(){
             submitForm(input) ;
        }, 40);


    })
});

Answer 2

它應該是

success: function (data) { 
    $("#result").val( 'http//www.example.com/'+data+'/'); 
}

Answer 3

責怪這個

success: function (data) {
                $("#result").html(data);
            }

對此

success: function (data) { 
        $("#result").attr('value','http//www.example.com/'+data+'/');
}

AJAX發布請求和字符串連接

問題描述

3 個解決方案

解決方案1
2 已采納 2013-11-09 16:22:28

解決方案2
1 2013-11-09 16:07:36

解決方案3
1 2013-11-09 16:13:27

AJAX發布請求和字符串連接

問題描述

3 個解決方案

解決方案1 2 已采納 2013-11-09 16:22:28

解決方案2 1 2013-11-09 16:07:36

解決方案3 1 2013-11-09 16:13:27

解決方案1
2 已采納 2013-11-09 16:22:28

解決方案2
1 2013-11-09 16:07:36

解決方案3
1 2013-11-09 16:13:27