Send JSON file from jQuery to PHP without AJAX

Question

So, I'm new to javascript/jquery, but I have played around long enough with PHP. I know how to get data from an input with PHP, which is really easy, but when trying to do the same with jQuery, how to do it just flies over my head.

Right now I have this script:

<script type="text/javascript">
    function onSubmit( form ){
        var data = JSON.stringify( $(form).serializeArray() );
        console.log( data );
    }
</script>

And this form:

<form onsubmit='return onSubmit(this)'>
    <input type="date"/><br/>
    <input type="date"/><br/>
    <input type="submit" name=""/>
</form>

I see it logs the .json file just fine ([{"name":"from","value":"1994-01-01"},{"name":"to","value":"1994-02-02"}]) . My guess is it's pretty much sending the .json to the .php file, and then doing a $_POST, but I don't know how to proceed from here or do it. I don't know if ajax IS necessary or not, and if not, how to do it without it (everything I found around here is using ajax).

@julekgwa Yes. The solution was in `var results = JSON.parse(data);` and then using `results[i].probeTemp` in a loop. I was just implementing it badly. — Newwt, Apr 26 '17 at 13:39
@julekgwa Oh, and `$postVars = $request->getParsedBody();` and `$var = $request->getAttribute('var');` — Newwt, Apr 26 '17 at 13:40

score 2 · Answer 1 · answered Apr 18 '17 at 13:45

You can send form data as text string in standard URL-encoded notation or as JSON like string with jQuery.serialize().

<form id="set-date-form">
    <input name="from" type="date"/><br/>
    <input name="to" type="date"/><br/>
    <input type="submit" id="set-date"/>
</form>

with jQuery

<script>
   $('#set-date').on('click', function (e) {
       e.preventDefault();
       var data = $('#set-date-form').serialize();
       $.post('somephpfile.php', data, function (response) {
           // response is the data echoed from php
           var result = JSON.parse(response) // assuming that php echoed ['success' => true/false];
           if (result.success == true) {
               alert("the values were sent to db successfully");
           }else {
               alert("the values were not sent to db successfully");
           }
       })
   })
</script>

Then in your PHP file

<?php

$from = $_POST['from'];
$to = $_POST['to'];

// here you can update the database with this values
// after updating db or insert
// check if the query was successful
// if query was successful [echo json_encode(['success' => true]);] this value will be sent to javascript as a response
// if query was not successful [echo json_encode(['success' => false]);] this value will be sent to javascript as a response

score 0 · Answer 2 · answered Apr 12 '17 at 09:54

0

PHP is treated Server-side.

If you want to send data to "PHP" you need to request the server (either via Ajax if you don't want to change your current page or calling a new URL with the data).

I know how to get data from an input with PHP

That's a pretty wrong statement as PHP can't get data from input since it's server side. The browser send data to PHP calling the server.

answered Apr 12 '17 at 09:54

Michael Laffargue

10,116
6
42
76

Hm... I was thinking about running a function in the php file once I "submit" the .json file, so the page doesn't redirect me. Didn't think about that. I guess I'll have to get into ajax after all :/ – Newwt Apr 12 '17 at 10:03

score 0 · Answer 3 · answered Apr 12 '17 at 09:58

0

Instead , define a route to post your input data in your php file and then through the form you can simply method='POST' rather than using ajax to send your data.

answered Apr 12 '17 at 09:58

Ozan

1,623
3
13
25

I use Express.JS to define the routes to post the data but I am assuming that you have your routes in your php file as well connected to your database so my assumption is that if you have the connection on your back end the data will get posted through the method. – Ozan Apr 12 '17 at 10:06

score 0 · Answer 4 · edited May 23 '17 at 10:31

You could also use an XML HTTP Request.

Here is an example.

var http = new XMLHttpRequest();
var url = "get_data.php";
var params = "lorem=ipsum&name=binny";
http.open("POST", url, true);

//Send the proper header information along with the request
http.setRequestHeader("Content-type ", "application/x-www-form-urlencoded");

http.onreadystatechange = function() {//Call a function when the state changes.
    if(http.readyState == 4 && http.status == 200) {
        alert(http.responseText);
    }
}
http.send(params);

This is taken from an answer here.

Send POST data using XMLHttpRequest

Send JSON file from jQuery to PHP without AJAX

4 Answers4

Linked