Use ajax to refresh page without reload, and in this pages use POST / GET

Question

There are 3 sides, which I'm using Ajax to avoid having to reload the page to refresh. This 3 side content, and js :

Content:

<ul id="nav">
<li><a href="ajax_adat.php?id=8&epul=0">Adatok</a></li>
<li><a href="piac_vasarlas.php?id=8&epul=0">Kereskedelem</a></li>
<li><a href="piac_egyseg_gyartas.php?id=8&epul=0">Egység gyártás</a></li>

Js:

$(document).ready(function () {

$('ul#nav li a').click(function(){
    var page = $(this).attr('href');
    $('#content').load('../views/' + page );
    return false;
});});

All three pages would like to use POST and GET. For example what i like to use: The egyseg_gyartas.php?id=8&epul=0 look like:

...<input type=\"number\" name=\"v_vesz\" min=\"0\" max=\"".$hany["$v[$i]"]["epitheto"]."\" step=\"1\">...
<form action="<?php echo $_SERVER['PHP_SELF'], '?id=' . $id . '&epul=' . $lenneEpulet . '&Pgyart';?>" method="post">
    <input type="submit" name="egyseg_vasarlas" value="Küldés" style="float: left">
    <input type="Button" value="Vissza" onclick="$:location.href='../views/jatek.php'" style="float: left; margin-left: 10px">
</form>

For example the POST :

if( isset($_POST['egyseg_vasarlas']) )
{
    x = $_GET['v_vesz']
    ..... 
}

So how can i use POST if i use this refreshed pages without reload ? In the POST usually have to change the variables which will build on that page . For example, you can buy a wagon ( game ), and if you bought it , int the POST i need to change, now he cant buy 2 wagon, only 1, and i use php functions in POST, etc... .

Answer 1

Put the input fields into the form element:

<form action="<?php echo $_SERVER['PHP_SELF']. '?id=' . $id . '&epul=' . $lenneEpulet . '&Pgyart';?>" method="post">
    <input type=\"number\" name=\"v_vesz\" min=\"0\" max=\"".$hany["$v[$i]"]["epitheto"]."\" step=\"1\">
    <input type="submit" name="egyseg_vasarlas" value="Küldés" style="float: left">
    <input type="Button" value="Vissza" onclick="$:location.href='../views/jatek.php'" style="float: left; margin-left: 10px">
</form>

If you would like to send the data, you must put the input fields into the form.

It was the problem?

Answer 2

From what I can see you are using .load which

is roughly equivalent to $.get(url, data, success)

If you want to post the data you can still use .load

The POST method is used if data is provided as an object; otherwise, GET is assumed.

So an example which should perform a post is..

$(document).ready(function () {
    $('ul#nav li a').click(function(){
        var page = $(this).attr('href');
        var data = {
            "id": $(this).data("id"),
            "epul": $(this).data("epul"),
            "type": $(this).data("type"),
        };
        $('#content').load('../views/' + page, data);
        return false;
    });
});

---

One other thing I would say is that if you use data attributes you will find it easier to extract the GET parameters from the clicked element and pass them in the data object to the backend. I have done that in the example above

<ul id="nav">
<li data-id="8" data-epul="0" data-type="adatok"><a href="ajax_adat.php>Adatok</a></li>
<li data-id="8" data-epul="0" data-type="kereskedelem"><a href="piac_vasarlas.php>Kereskedelem</a></li>
<li data-id="8" data-epul="0" data-type="egyseg_vasarlas"><a href="piac_egyseg_gyartas.php>Egység gyártás</a></li>