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

【问题标题】：Calling server data via JSON string通过 JSON 字符串调用服务器数据
【发布时间】：2018-12-01 23:18:13
【问题描述】：

我需要使用以下参数发布一个 JSON 编码的字符串：

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

我有；

要查询的端点 URL；
一个input 搜索框和一个用于触发查询的搜索按钮。我需要用用户输入替换ADDQUERY。

谁能解释一下使用 JSON POST 调用此信息？

【问题讨论】：

您到底想达到什么目的，您只想替换 ADDQUERY 吗？你是如何发送数据的，没有代码我们无法提供帮助。
@van : 你只需要根据用户输入动态地制作这个 url
@Hudson 我正在尝试查询服务器上的数据以从搜索栏返回搜索结果，我之前没有使用过 JSON，所以我不知道如何格式化代码并链接它到输入字段
看到这个帖子：stackoverflow.com/questions/39519246/…
@Hudson 如何根据搜索框内容使用 JS 运行该查询字符串？

标签： php arrays json post

【解决方案1】：

这样，

您可以复制并粘贴此内容，只需确保更改目标 url 和输入框 querySelector ，如果它有 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>

它绝对是工作伙伴：

【讨论】：

很遗憾，这并没有为我呈现任何搜索结果，您知道为什么会发生这种情况吗？
我已经从 Mozilla Firefox 成功运行它了？你修改过其他代码吗？
在 Chrome 中失败？ "message: "对象必须只包含一个字符串属性：params near line:1 column:11"
复制并粘贴我上面的代码，我在上次编辑时修复了这个问题，我一开始读错了你的 JSON。
非常感谢，现在“工作”（有点），查询字符串解析成功，我没有看到查询返回的任何结果，你知道我将如何显示这些在 .searchresults 容器中？

【解决方案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; 
    }
  }
}

【讨论】：