How can I use jQuery´s $.ajax() function to run php script? [duplicate]

Question

To make this understandable I made an sample code because my actual code is much bigger.

Basically what I want to accomplish is to run my PHP script that edits an XML file using ajax. This is because I need to do this inside a javascript in my real project.

This is what I have so far:

the .php file containing the ajax function:

<!DOCTYPE html>
<html>
<head>
<script>
function editXMLDoc()
{
  $.ajax({
  url: "sensors.php",
  context: document.body
}).done(function() {
  $( this ).addClass( "done" );
});
}
</script>
</head>
<body>

<button type="button" onclick="editXMLDoc()">Endre XML</button>

</body>
</html>

And here is the php script writing to xml:

<?php
include 'sensor.php';
$b=new sensor();

$arr=$b->load('sensor.xml');         

for($i=0,$ms=count($arr);$i<$ms;$i++)
{
  if($arr[$i]['fields']['status']=='1')
  {
     $arr[$i]['fields']['status']='0';
  }else{
    $arr[$i]['fields']['status']='1';
  }
}
echo "Completed<br/>";
//3. save array to xml
$b->save('sensor.xml',$arr);
?>

I know the script is working so I am pretty sure the prob is the connection between the ajax function and the php script.

Can anyone help me out?

In the Ajax you use the function sensors.php but the php file is called sensor.php. Or the file with the script is called sensors.php? — JuaRoAl
– JuaRoAl, Commented Mar 27, 2015 at 10:12
No its not. The php file includes another php file called sensor.php. I can see how that might be confusing. — The Dude
– The Dude, Commented Mar 27, 2015 at 10:14
@user2927356: Did this answer your previous question stackoverflow.com/q/29278936/367456 as well? — hakre
– hakre, Commented Mar 27, 2015 at 20:30

Sateesh · Accepted Answer · 2015-03-27 12:50:08Z

Try this code... actually you did not attached jQuery library.

<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript">
            jQuery(document).ready(function($){
                var resp = $("#response");
                $.ajax({
                    type: "POST", // Method type GET/POST           
                    url: "sensors.php", //Ajax Action url
                    data: {},

                    // Before call ajax you can do activity like please wait message
                    beforeSend: function(xhr){
                        resp.html("Please wait...");
                    },

                    //Will call if method not exists or any error inside php file
                    error: function(qXHR, textStatus, errorThrow){
                        resp.html("There are an error");
                    },

                    success: function(data, textStatus, jqXHR){
                        resp.html(data);
                    }
                });
            });
        </script>
    </head>
    <body>
        <div id="response"></div>
    </body>
</html>

Sateesh · Accepted Answer · 2015-03-27 10:36:20Z

1

Use AJAX like this:

<script type="text/javascript">
  jQuery(document).ready(function($){

    $('.rt11').click(function(){

        $.ajax({
            type: "POST", // Method type GET/POST           
            url: "sensors.php", //Ajax Action url
            data: {yourKey: "yourValue", yourKey1: "another value"},

            // Before call ajax you can do activity like please wait message
            beforeSend: function(xhr){
                console.log("Please wait...");
            },

            //Will call if method not exists or any error inside php file
            error: function(qXHR, textStatus, errorThrow){
                console.log("There are an error");
            },

            success: function(data, textStatus, jqXHR){
                console.log(data);
            }
        });

    });

});
</script>

answered Mar 27, 2015 at 10:36

Sateesh

1,33610 silver badges13 bronze badges

12 Comments

The Dude Over a year ago

Ok, but how do I call this function with a button?

JuaRoAl Over a year ago

In your ajax call you don't need "data", "beforeSend", and "type" atributes to make it simpler. And if it returns a xml file, add dataType: "xml".

Sateesh Over a year ago

Pass your element selector CLASS or ID inside $('.rt11').click(function(){

The Dude Over a year ago

@Sateesh Sorry to be completely noobish, but when you say pass it inside, how do I do that. thought it would be something like this: <button type="button" class="rt11">Endre XML</button>

Sateesh Over a year ago

I mean that you are using class="rt11" and this class already $(".rt11") used inside braces so on button click ajax request will call. if you are using Firefox then install AddOn called Firebug then check in console you will see ajax request.

|

sandeep soni · Accepted Answer · 2015-03-27 10:22:24Z

0

I think there is no problem in code but sometime in large code the min.js file did not include properly. please try the below code. there is no need to change sensors.php file.

<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function(){
    $('.rt11').click(function(){
  $.ajax({
  url: "sensors.php",
  context: document.body
}).done(function(html) {
  $( this ).addClass( "done" );
});
});
});
</script>
</head>
<body>

<button type="button" class="rt11">Endre XML</button>

</body>
</html>

answered Mar 27, 2015 at 10:22

sandeep soni

3031 silver badge12 bronze badges

1 Comment

The Dude Over a year ago

just tried it. unfortunately no luck. The sensors.php did not what it is set to do

JuaRoAl · Accepted Answer · 2015-03-27 11:10:51Z

HTML:

<button type="button" id="idButton">Endre XML</button>

JS:

  $("#idButton").click(function(){
        $.ajax({
                url: 'sensors.php',
                dataType: "xml", //if it returns a xml file
                success: function (data) {
                    // everything is ok
                    alert(data)

                },
                error: function (xhr, status, error) {
                    // Something went wrong
                    if (xhr.status > 0) alert('Error: ' + status);
                }
            });

        })

Vijay · Accepted Answer · 2015-03-27 13:51:24Z

Try this i think you missed to include the jQuery library file.Get post data to your php file after ajax call.

    <!DOCTYPE html>
    <html>
    <head>
    //include the jQuery library file
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
    function editXMLDoc()
    {
      var myvalue='123';  
      $.ajax({
              url: "sensors.php",
              context: document.body,
              data: {myvalue:myvalue},   
             }).done(function() {
                 $( this ).addClass( "done" );
             });
     }
    </script>
    </head>
    <body>

    <button type="button" onclick="editXMLDoc()">Endre XML</button>

    </body>
    </html>

Collectives™ on Stack Overflow

How can I use jQuery´s $.ajax() function to run php script? [duplicate]

5 Answers 5

1 Comment

12 Comments

1 Comment

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

12 Comments

1 Comment

Comments

1 Comment

Linked

Related