Calling server data via JSON string - php

Question

I need to POST a JSON ecoded string using the following parameters:
{"params":"query=ADDQUERY&hitsPerPage=6&filters=type%3Aartists"}
I have;
An endpoint URL to query;
An input search box and a search button to trigger the query. I need to replace ADDQUERY with the user input.
Can anyone shed some light on calling this info with JSON POST?

Answer 1

Like this,
you can copy and paste this, just make sure to change the target url, and the input boxes querySelector , if it has an ID use '#' + the box id.
Edited your fiddle. Here's the full code.
<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>
Its definitely working buddy:

Answer 2

I understand that you are trying to build your query using just PHP. You could look into using CURL to build the URL and send the request to a site or you could just encode the string with JS and redirect the page with the new URL.http://codular.com/curl-with-php A better option would be to send the request with AJAX and prevent a page refresh. Hope this helps. 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;
}
}
}