使用jQuery替換API輸出的輸入

Question

我有一個文本框和一個提交按鈕。提交表單（按下按鈕或單擊按鈕）後，我希望瀏覽器保留在當前頁面上，不要重新加載任何內容。

我想從文本字段中獲取輸入，使用此數據聯繫HTTP GET API，然後將API的輸出返回到輸入文本框中，並突出顯示輸出以便它可以複製到剪貼板。

我是新來的jQuery，因此，如果任何人的願意寫這個代碼希望小片段，這將會是非常讚賞:)

Answer 1

這個代碼表示：

• 當表單提交...
• 不做默認的事情（提交表單）...
• 發送GET請求到第e指定的服務器具有一定的值，那麼當它完成時運行一個函數...
• 將數據放入輸入並...
• 選擇輸入中的文本。

你需要改變你的網址，將mystring到任何服務器期待作爲paramater，如果你有多個窗體或輸入，你需要指定ID或類（如form#myid或form.myclass ）。除此之外，這應該工作。

$('form').submit(function(e){ 
    e.preventDefault(); 
    $.get("/url/from/get/api", {mystring: $('input').val()}, function(data, status) { 
     $('input').val(data); 
     $('input').select() 
    }); 
    return false; 
}) 

更多詳情http://api.jquery.com/jQuery.get/

Answer 2

這應該爲你工作。你不能跨域交叉。

$(function(){ 
    $('#idOfForm').on('submit', function(e){ 
     e = e || window.event; 
     e.preventDefault(); 
     $.ajax({ 
      url: 'curl.php', 
      data: $(this).serialize(), 
      datatype: 'post', 
      success: function(data){ 
       //do something with returned data 
       alert(data); 
      } 
     }); 
    }); 
}); 

curl.php：

$url = 'http://apiurl.com'; 
$ch = curl_init(); 
curl_setopt($ch, CURLOPT_URL, $url); 
curl_setopt($ch ,CURLOPT_POST, 1); 
curl_setopt($ch, CURLOPT_POSTFIELDS, $_POST); 
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE); 
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 2); 
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); 
$contents = curl_exec($ch); 
$err = curl_getinfo($ch, CURLINFO_HTTP_CODE); 
curl_close($ch); 
echo $contents ? $contents : $err; 

Answer 3

$('#your_button_id').click(function(e){ 
    e.preventDefault(); //to stay on same page 
    $.ajax({ 
    type: 'POST', 
    url: 'your_url', 
    data: $('#form_id').serialize(), 
    success: function(response){ 
     //On success you will have responce from server 
     //Do all yo need with buttons and texts 
    } 
    }); 
});