Question

我正在使用jQuery / AJAX来发布帖子请求。我试图从第一个文本框中获取输入并将其与URL连接并在第二个文本框中显示结果。示例，如果用户在asdf中键入，则ajax函数将生成帖子，结果将显示为http://www.example.com/sdf/。我有两个问题，如前所述，我有一个ajax函数，它正在执行post但没有结果是在html中进行diplaying（它确实在firebug控制台中显示）。其次，如何将输入连接到url。 Live Site

<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

chage this

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

到这个

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

AJAX发布请求和字符串连接

3 个答案: