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