javascript AJAX 发布请求和字符串连接

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/19877968/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 17:08:02  来源:igfitidea点击:

AJAX post request and string concatenation

javascriptjqueryajax

提问by user2970730

I am using jQuery/AJAX to do a post request. I am trying to take the input from the first textbox and concatenate that with a url and display result in the second textbox. Example, If user types in asdfthe ajax function will then make the post and the result will display as http://www.example.com/sdf/. I have two problems, As mentioned early I have a ajax function that it is performing post but no result is diplaying in the html(it does show in the firebug console). Second, How can I concatenate the input into the url. Live Site

我正在使用 jQuery/AJAX 来做一个发布请求。我正在尝试从第一个文本框中获取输入并将其与 url 连接并在第二个文本框中显示结果。例如,如果用户在asdfajax 函数中键入,则将发布帖子,结果将显示为http://www.example.com/sdf/. 我有两个问题,正如前面提到的,我有一个 ajax 函数,它正在执行 post 但没有结果显示在 html 中(它确实显示在萤火虫控制台中)。其次,如何将输入连接到 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>

回答by charlietfl

I would suggest you pass parameters into submitForminstead of using a global variable for data.

我建议您将参数传入submitForm而不是使用全局变量来存储数据。

To do concatenation could store the original value of the input using .data()method and always grab that and then add your new value to it.

要进行连接,可以使用.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);


    })
});

回答by Vicky Gonsalves

it should be

它应该是

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

回答by user2511140

chage this

改变这个

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

to this

对此

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