CODEWITHSUNDEEP
javascriptphpjquerysqlajax
user3521471
user3521471

Reputation: 180

How do i make a simple AJAX request to execute php?

Hey guys this is a problem kind of specific to what i'm trying to do on my site and i cant find an answer so i just throught i'd make my own question

What i'm trying to do:

When i press a button on my site it executes a javascript function. Within this JS function i create an array. The order of this array is key to the functionality of the AJAX request because the whole point is to be able to reorder the array to your liking.

The contents of this array represent mySQL rows.

I would like to be able to execute a php function upon button press which will take this array, and set values to the "Order" column of my table. ie: 1st element of the array gets its "order" value set to one. Last element of the array gets its "order" value set to N(however many there are).

Here is my current javascript:

<script>
  $(document).ready(function(){
    $( "#sortable" ).sortable({axis:"y"});
    $("button").click(function(){
     var sortedIDs = $( "#sortable" ).sortable("toArray");
      var num = sortedIDs[0];
    alert(num);
    $.post({
    url:"ajax2.php",

    });

  });
});
</script>

Here is what my ajax2.php page looks like:

<?php
include 'connect.php';
  $sql = "UPDATE categories
      SET cat_order=1
      WHERE cat_id=5;";

$result = mysql_query($sql);

?>

I just put in numbers to test the functionality. In the end i would like to be able to use the information set in the javascript array "sortedIDs".

To make it clearer what i want to do in general....I'm creating a web forum and i would like to change the order of my forum categories on the main page. I have created a "sortable" jquery ui interface in order to do this. When you press the button on this interface it executes the js function i posted. It knows the order of the list of categories. And it knows the order after you change it.

Upvotes: 0

Views: 94

Answers (2)

Tushar Dave
Tushar Dave

Reputation: 220

Here`s a sample ajax code based on jquery.

$.ajax({
        url     :   "path_to_ajax2.php",
        type    :   "POST",
        data    :   ({sorted_ids:num}),
        success :   function(data){

            //show the sorted array here.
        }
    });

and don`t forget to echo something if your update is successful at ajax2.php which returns control to the ajax calling function.

Upvotes: 0

AssemblyX
AssemblyX

Reputation: 1851

This maybe a little old school but I like using my own xmlHTTP request rather than one provided by jQuery. Here is a sample of what I think may help you solve your problem.

HTML and Javascript:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script>
// JavaScript Document

function xmlHttp()
{
    this.strHTML;
    this.objXML;
    this.postReturn = function(post, page){
        if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        }else{// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function(){
            if (xmlhttp.readyState==4 && xmlhttp.status==200){
                this.strHTML = xmlhttp.responseText;
                this.objXML = xmlhttp.responseXML;
                pageReturn(this.strHTML, this.objXML);
            }
        }
        xmlhttp.open("POST",page,false);
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xmlhttp.send(post);
    }
}

function pageReturn(strHTML, objXML){
    alert(strHTML);
}

function sampleSend(){
    var strPost="";

    //dont forget to encodeURIComponent() when you use this for production
    for(var i=0;i<10;i++){
        strPost += (!strPost)?"blah"+i+"=value"+i:"&blah"+i+"=value"+i;
    }
    var xmlhttp = new xmlHttp();
    xmlhttp.postReturn(strPost, "test.php");
}
</script>
</head>

<body>
<div onclick="sampleSend()">clickMe</div>
</body>
</html>

PHP test.php in this sample

<?php
foreach($_POST as $k => $v){
    $sql = "insert into tableName (someField) values ('".$v."');";

    //this is uncommented to alert what is happening
    echo $sql . "\n";
    //mysql stuff here
    //this is just an example of looping the $_POST
}
echo "done";
?>

Hope this helps!

Upvotes: 1

Related Questions