如何使用jQuery的$ .ajax()函数来运行php脚本?

时间:2015-03-27 10:04:06

标签: php jquery ajax xml

为了使这个可以理解,我制作了一个示例代码,因为我的实际代码要大得多。

基本上我想要完成的是运行我的PHP脚本,使用ajax编辑XML文件。这是因为我需要在我的真实项目中的javascript中执行此操作。

这是我到目前为止所做的:

包含ajax函数的.php文件:

<!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>

这是写入xml的PHP脚本:

<?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);
?>

我知道脚本正在运行,所以我很确定prob是ajax函数和php脚本之间的连接。

任何人都可以帮助我吗?

5 个答案:

答案 0 :(得分:6)

试试这段代码......实际上你没有附加jQuery库。

<!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>

答案 1 :(得分:1)

像这样使用AJAX:

<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>

答案 2 :(得分:0)

我认为代码中没有问题,但有时在大代码中min.js文件没有正确包含。请尝试以下代码。无需更改sensors.php文件。

<!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>

答案 3 :(得分:0)

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);
                }
            });

        })    

答案 4 :(得分:0)

尝试这个我认为你错过了包含jQuery库文件。在ajax调用之后将数据发布到你的php文件中。

    <!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>