0

我正在使用 jQuery/AJAX 进行发布请求。我正在尝试从第一个文本框中获取输入并将其与 url 连接并在第二个文本框中显示结果。例如，如果用户在 ajax 函数中键入，asdf然后将发布帖子，结果将显示为http://www.example.com/sdf/. 我有两个问题，如前所述，我有一个 ajax 函数，它正在执行 post 但没有结果显示在 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>
4

3 回答 3

2

我建议您将参数传递给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);


    })
});
于 2013-11-09T16:22:28.270 回答
1

改变这个

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

对此

success: function (data) { 
        $("#result").attr('value','http//www.example.com/'+data+'/');
}
于 2013-11-09T16:13:27.947 回答
1

它应该是 

success: function (data) { 
    $("#result").val( 'http//www.example.com/'+data+'/'); 
}
于 2013-11-09T16:07:36.480 回答