AJAX發佈請求和字符串連接

我正在使用jQuery/AJAX做post請求。我試圖從第一個文本框中獲取輸入，並將其與第二個文本框中的url結合並顯示結果。例如，如果用戶鍵入asdf，則ajax函數將生成帖子，結果將顯示爲http://www.example.com/sdf/。我有兩個問題，正如前面提到的，我有一個ajax函數，它正在執行post，但沒有結果在html中顯示（它顯示在firebug控制檯中）。其次，我如何將輸入連接到url。 Live Site AJAX發佈請求和字符串連接

<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>

來源

2013-11-09 user2970730

使用$（「＃結果」）VAL（數據）。而不是$（「＃result」）。html（data）; –

我會建議你把參數傳遞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-09 16:22:28 charlietfl

什麼都沒有顯示，在螢火蟲控制檯中檢查，甚至沒有發出發佈請求。 [鏈接]（http://webprolearner.ueuo.com/concatenate/） – user2970730

確定快速修復緩存值 – charlietfl

我喜歡這種方法，並作出改變，但它仍然顯示整個HTML頁面？ – user2970730

應該

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

來源

2013-11-09 16:07:36

CHAGE這

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

這個

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

來源

2013-11-09 16:13:27 user2511140

這只是不正確的......輸入有價值不innerHtml – charlietfl

我的錯誤代碼更新 – user2511140

我喜歡你要去的地方，但它將整個html頁面追加到結果的末尾。請參閱[鏈接]（http://webprolearner.ueuo.com/concatenate/） – user2970730

AJAX發佈請求和字符串連接

回答

相關問題