通过JSON字符串调用服务器数据

Question

我需要使用以下参数发布JSON生态字符串：

{"params":"query=ADDQUERY&hitsPerPage=6&filters=type%3Aartists"}

我有；

• 要查询的端点URL；

• 一个input搜索框和一个搜索按钮可触发查询。我需要用用户输入替换ADDQUERY。

任何人都可以通过JSON POST调用此信息吗？

Answer 1

喜欢，

您可以复制并粘贴此代码，只需确保更改目标url，然后输入框querySelector即可（如果ID为ID，则使用'＃'+框ID。

编辑了小提琴。这是完整的代码。

    <div class="bodyparent">

<div class="searchbar">
   <div class="searchbar_inner">

      <div class="searchleft">
      <image onclick="search()" src ="search.png"/>
      </div>

      <div class="searchright">
      <input onchange="search()" id="searchinput" type="text" placeholder="Search...">
      </div>

   </div>
</div>

<div class="searchresults">

</div>
<script>
function search(){
  var box = document.querySelector("#searchinput");
  var json = { "params" :  "query=" + box.value + "&hitsPerPage=" + 6 + "&filters=type_artists"};

  var postData = JSON.stringify(json);
  //this is the string you requested above.

  var x = new XMLHttpRequest();

  x.open("POST" , "https://ufhsub9629-dsn.algolia.net/1/indexes/search/query?x-algolia-application-id=UFHSUB9629&x-algolia-api-key=69ed687a250f4c895cc73f6ee142a42e" , true);
  x.onreadystatechange = function(){
    if(x.status == 200 && x.readyState == 4){
        //do whatever here
    }
  }
  x.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
  x.send(JSON.stringify(json));
}
</script>

它肯定是工作伙伴：

Answer 2

我了解您正在尝试仅使用PHP构建查询。您可以考虑使用CURL来构建URL并将请求发送到网站，也可以使用JS编码字符串并使用新的URL重定向页面。http://codular.com/curl-with-php更好的选择是使用AJAX并防止页面刷新。希望这可以帮助。 http://jsfiddle.net/codedcontainer/xpvt214o/287107/

$('form#artistForm').on('submit', function(e){
    e.preventDefault(); 
    var inputVals = $(this).serializeArray();
    var singleInputVal = returnSingleInputVal('search', inputVals); 
    var queryObj = buildAjaxObject(singleInputVal);
    sendAjaxRequest('/echo/json', queryObj); 
});

function buildAjaxObject(searchQuery){
    var dataObject = {
        query :searchQuery,
        hitsPerPage: 6, 
        filters: ['artist', 'asc']
    }
 return dataObject; 
}
function sendAjaxRequest(url, dataObject){
    $.post(url, JSON.stringify(dataObject), function(data){
        $('#resultString').text(data); 
    });
}

function returnSingleInputVal(inputName, inputArray){
    for (var a = 0; a <= inputArray.length -1; a++){
    if ( inputArray[a].name == inputName){
        return inputArray[a].value; 
    }
  }
}