無法通過ajax將String傳遞給控制器

Question

我是使用play框架和ajax進行web開發的新手，現在我想將表單中的字符串傳遞給帶有ajax的控制器，但我不知道該怎么做。請你幫我嗎？這是我的代碼：html：

<form onsubmit="return newSearch();" id="formId">
    <input type="search" placeholder="Search for more" id="searchBar_chat">
</form>
<script type="text/javascript" >
function newSearch()
{
    var s = document.getElementById("chatDialgue");
    var searchValue = document.getElementById("searchBar_chat").value;
    s.innerHTML = s.innerHTML + '<li>'+ searchValue +'</li>';
    document.getElementById("searchBar_chat").value ="";
    $.ajax({
        url: "DataMatch/searchContentMatch",  
        type:"GET",
        cache: false,
        dataType:"text",
        data:"searchValue",
        success: function (responseData) {  
        s.innerHTML = s.innerHTML + '<li>'+responseData+'</li>';  
        }  
        });
    return false;
}
</script>

控制器：

public class DataMatch extends Controller{

  public String searchContentMatch (String search) {
    // Search match
    return "HI"+search;
  }

}

Answer 1

將其作為查詢參數傳遞，因為它只是一個字符串。

var search="searchValue";
 $.ajax({
        url: "DataMatch/searchContentMatch?search="+search,  
        type:"GET",
        cache: false,
        dataType:"text",
        success: function (responseData) {  
        s.innerHTML = s.innerHTML + '<li>'+responseData+'</li>';  
        }  
        });

Answer 2

首先，在$.ajax()的data參數中，您必須構建一個查詢字符串，因此正確的方法是將密鑰（“search”）與其值（searchValue）連接起來。

然后，您既不需要在腳本中return false語句，也不需要在onsubmit表單屬性上return關鍵字。

最后，由於您正在使用jQuery，請利用其選擇功能並將document.getElementById替換為$ 。

<form onsubmit="newSearch();" id="formId">
    <input type="search" placeholder="Search for more" id="searchBar_chat">
</form>
<script type="text/javascript" >
function newSearch(){
    var searchValue = $("#searchBar_chat").val();
    $("#chatDialgue").append('<li>'+ searchValue +'</li>');
    $("#searchBar_chat").val("");
    $.ajax({
        url: "DataMatch/searchContentMatch",  
        type:"GET",
        cache: false,
        dataType: "text",
        data: "search=" + searchValue,
        success: function (responseData) {  
            $("#chatDialgue").append('<li>' + responseData + '</li>');
        }  
    });
}
</script>

Answer 3

您應該使用Javascript路由器，而不是在Javascript代碼中硬編碼端點。 這將允許您稍后在需要時更改端點名稱。 此外，您希望傳遞查詢字符串參數，因此它直接在URL中傳遞。 以下是如何使用反向路線：

@helper.javascriptRouter("jsRoutes")(
    routes.javascript.DataMatch.searchContentMatch
)

//HTML here

var endpoint = jsRoutes.controllers.DataMatch.searchContentMatch(searchValue).url;
$.ajax({
  url: endpoint,  
  type:"GET",
  cache: false,
  success: function (responseData) {  
  s.innerHTML = s.innerHTML + '<li>'+responseData+'</li>';  
  }  
});

Answer 4

還有一點，對於上一個答案，請不要忘記routes文件中的參數：

GET    /api/search/:search             controllers.DataMatch.searchContentMatch(search: String)