AJAX 发布请求和字符串连接答案

【问题标题】：AJAX post request and string concatenationAJAX 发布请求和字符串连接
【发布时间】：2013-11-09 15:58:52
【问题描述】：

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

【问题讨论】：

使用 $("#result").val(data);而不是 $("#result").html(data);

标签： javascript jquery ajax

【解决方案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);


    })
});

【讨论】：

什么都没有显示，在萤火虫控制台中检查，甚至没有发布请求。 Link
确定快速修复缓存值
我喜欢这种方法并进行了更改，但是为什么它仍然显示整个 html 页面？
因为您正在从帖子中重新搜索整个页面，如果您只想将用户输入更改连接到newUrl= url+input。我遵循了你假设你只是返回相同的值

【解决方案2】：

修改这个

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

到这里

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

【讨论】：

我喜欢你要去的地方，但它将整个 html 页面附加到结果的末尾。见link
检查你的ajax回调（使用alert(data);）
@user2970730 你返回的数据是什么……一整页？如果是这样，您是否只想将用户输入添加到$('#result')，为什么要返回整个页面？
@charlietfl 我不希望整个页面只返回连接的结果。

【解决方案3】：

应该是

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

【讨论】：