无法通过ajax将String传递给控制器

Question

I'm new of web development with play framework and ajax,Now I want to pass the string in the form to controller with ajax but I don't know how to do.Could you please help me?Here is my code: 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>

controller:

public class DataMatch extends Controller{

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

}

Answer 1

Pass it as a Query Parameter since it is just a single string.

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

First of all, in the data parameter of $.ajax() you have to build a query string, so the correct way is concatenating the key ("search") with its value (searchValue).

Then, you don't need neither that return false statement in the script nor the return keyword on the onsubmit form attribute.

Lastly, since you're using jQuery, take advantage of its selection capabilities and replace document.getElementById with $ .

<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

You should use the Javascript router instead of hardcoding the endpoint in your Javascript code. This will allow you to change the endpoint name later on if needed. Also, you want to pass a query string parameter, so it goes directly in the URL. Here is how to use the reverse route:

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