使用ajax在同一文件中从javascript调用PHP函数

时间：2014-02-10 08:22:34

标签： javascript php jquery ajax

所以，我试图从javascript所在的同一个文件中调用一个php函数。

我试图每隔10秒调用一次php函数来向“li”添加新项目

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">

function addElement () {
var newLi = document.createElement("li");
var text = document.createTextNode("Teststring in <li>");

newLi.appendChild(text);
var ulnew = document.getElementsByClassName('new-item');
ulnew[0].appendChild(newLi)    
}
window.onload = function(){setInterval(function(){
    $.ajax( // I just copy pasted this part to
           {
               url: 'test.php',
               type: 'GET',
               success: function(output) 
               {
                      //alert(output);
                      document.write("It worked!"); 
               }
            }
        );// here I really have no idea what is suppose to happen here
},10000);}
</script>

<?php 

function echoTest(){
   echo 'item';
}

?>

同样，我要做的是每10秒执行一次php功能。我怎么会这样做？ 请帮助！

5 个答案:

答案 0 :(得分：2)

    Try This

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <script>
    window.onload = function(){setInterval(function(){
        $.ajax( // I just copy pasted this part to
               {
                   url: 'http://localhost/test.php',
                   type: 'GET',
                   success: function(output) 
                   {
                        var current = $("ul#updating-list").html();
                        $("ul#updating-list").html(current + "<li>" + output + "</li>");

                   }
                }
            ); // here I really have no idea what is suppose to happen here
    },10000);}
    </script>

你需要在php中调用该函数

<?php 

function echoTest(){
   echo 'item';
}
echotest();
?>

答案 1 :(得分：1)

嗯，你也可以这样做，肯定有很多方法来处理更新元素，但这是我觉得容易的方法。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Untitled Document</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    </head>
    <body>
        <ul id="updating-list"></ul>
        <script>
            window.onload = function(){
                setInterval(function(){
                    $.ajax({
                        url: "test.php",
                        type: "GET",
                        success: function(output){
                            var current = $("ul#updating-list").html();
                            $("ul#updating-list").html(current + "<li>" + output + "</li>");
                        }
                    });
                }, 10000);
            }
        </script>
    </body>
</html>

PHP文件看起来应该是这样的。

<?php
    if (!isset($_POST['call'])) {
        return;
    }

    $call = $_POST['call'];

    function result(){
        if ($call == "time") {
            echo(date('h:i:s'));
        }else{
            echo("Something fancy!");
        }
    }

    result();
?>

和hindmost一样，你不能像Ajax那样从同一个文件调用PHP函数。你必须把它放在另一个文件中并从那里调用它。

答案 2 :(得分：1)

*/radio button using jquery and ajax and get values from xml*/
<html>
<head><h1><b><i><center>RADIO BUTTONS </center></i></b></h1></head>
<body  bgcolor="palegoldenrod">
<form>
<script src="jquery-1.11.1.js">
</script>
<script>
$(document).ready(function(){
$("#age").blur(function() {
        var test = $(this).val();
        if(test=="")
        {
        $("#dropdown").hide();
        }
        else 
        {
        $("#dropdown").show();
        }

    });

    $.ajax({ 
        type: "GET", 
        url: "count.xml", 
        dataType: "xml", 
        success: function (xml) { 
            $(xml).find('countrylist').each(function () {
                var name = $(this).find('cname1').text(); 
                var option1 = $("<radio>" + name + "</radio>"); 
                var select=$("#div1");
                select.append(option1);

                var name = $(this).find('cname2').text(); 
                var option2 = $("<radio>" + name + "</radio>"); 
                var select=$("#div2");
                select.append(option2);

                var name = $(this).find('cname3').text(); 
                var option3 = $("<radio>" + name + "</radio>"); 
                var select=$("#div3");
                select.append(option3);
            });
        }   
    });
    });


function myCountry(country)
{
alert("HI" +country);   
 $.ajax({ 
            type: "GET", 
            url: "stat.xml", 
            dataType: "xml", 
            success: function (xml) { 
                var select = $('#div4'); 
                $(xml).find('state').each(function () 
                {
                var cval=$(this).find('country').text(); 
                if(country==cval){
                var name = $(this).find('sname').text();    
                select.append($("<label>" + name + "</label>"));
                }
                }); 
                var select = $('#div5'); 
                $(xml).find('state').each(function () 
                {
                var cval=$(this).find('country').text(); 
                if(country==cval){
                var name = $(this).find('sname1').text();   
                select.append($("<label>" + name + "</label>"));
                }
                });
                var select = $('#div6'); 
                $(xml).find('state').each(function () 
                {
                var cval=$(this).find('country').text(); 
                if(country==cval){
                var name = $(this).find('sname2').text();   
                select.append($("<label>" + name + "</label>"));
                }
                });
                var select = $('#div7'); 
                $(xml).find('state').each(function () 
                {
                var cval=$(this).find('country').text(); 
                if(country==cval){
                var name = $(this).find('sname3').text();   
                select.append($("<label>" + name + "</label>"));
                }
                });
                var select = $('#div8'); 
                $(xml).find('state').each(function () 
                {
                var cval=$(this).find('country').text(); 
                if(country==cval){
                var name = $(this).find('sname4').text();   
                select.append($("<label>" + name + "</label>"));
                }
                });
                var select = $('#div9'); 
                $(xml).find('state').each(function () 
                {
                var cval=$(this).find('country').text(); 
                if(country==cval){
                var name = $(this).find('sname5').text();   
                select.append($("<label>" + name + "</label>"));
                }
                });

                        }
     });
}

function myFun(city)

{
alert("hiiiii" +city);  
 $.ajax({ 
            type: "GET", 
            url: "city.xml", 
            dataType: "xml", 
            success: function (xml) { 
                $(xml).find('city').each(function () 
                {
                var sval=$(this).find('state').text(); 

                if(city==sval)
                {
                var select = $('#div10');
                var name = $(this).find('cname').text();    
                select.append($("<label>" + name + "</label>"));
                }


                var sval=$(this).find('state').text(); 

                if(city==sval)
                {
                var select = $('#div11');
                var name = $(this).find('cname1').text();   
                select.append($("<label>" + name + "</label>"));
                }


                var sval=$(this).find('state').text(); 

                if(city==sval)
                {
                var select = $('#div12');
                var name = $(this).find('cname2').text();   
                select.append($("<label>" + name + "</label>"));
                }
                var sval=$(this).find('state').text(); 

                if(city==sval)
                {
                var select = $('#div13');
                var name = $(this).find('cname3').text();   
                select.append($("<label>" + name + "</label>"));
                }

                var sval=$(this).find('state').text(); 

                if(city==sval)
                {
                var select = $('#div14');
                var name = $(this).find('cname4').text();   
                select.append($("<label>" + name + "</label>"));
                }


                var sval=$(this).find('state').text(); 

                if(city==sval)
                {
                var select = $('#div15');
                var name = $(this).find('cname5').text();   
                select.append($("<label>" + name + "</label>"));
                }
                }); 
        }
     });
}

</script>


<br>
<br>
<br>
<label style="width:100px;float:left;">First Name</label> <input type="text" id="name"><br><br>
<label style="width:100px;float:left;">Middle Name</label> <input type="text"><br><br>
<label style="width:100px;float:left;">Last Name</label> <input type="text"><br><br>
<label style="width:100px;float:left;">Address Line1</label> <textarea rows="3" cols="16"></textarea><br><br>
<label style="width:100px;float:left;">Address Line2</label> <textarea rows="3" cols="16"></textarea><br><br>
<label style="width:100px;float:left;">Age</label> <input type="number" id="age" value="a"><br><br>
<div id="dropdown" style="display:none">

<label style="width:100px;float:left;">Country</label> <br>

<div id="div1">
<input type="radio" name="country" id="ind" value="India" onclick="myCountry(this.value)">
<label style="width:100px;float:left;"></label> </div><br>

<div id="div2">
<input type="radio" name="country" id="usa" value="US" onclick="myCountry(this.value)">
<label style="width:100px;float:left;"></label> </div><br>

<div id="div3">
<input type="radio" name="country" id="cnd" value="Australia" onclick="myCountry(this.value)">
<label style="width:100px;float:left;"></label></div>
<br>
<br>
<br>


<label style="width:100px;float:left;">State</label> <br>
<br>
<div id="div4">
<input type="radio" name="rad" id="radio2" value="Tamil Nadu" onchange="myFun(this.value)"><label style="width:100px;float:left;"></label>
</div>
<div id="div5">
<input type="radio" name="rad"  id="radio2" value="Andhra Pradesh" onchange="myFun(this.value)"><label style="width:100px;float:left;"></label>
</div>
<div id="div6">
<input type="radio" name="rad" id="radio2" value="Florida" onchange="myFun(this.value)"><label style="width:100px;float:left;"></label>
</div>
<div id="div7">
<input type="radio" name="rad" id="radio2" value="NewJersey" onchange="myFun(this.value)"><label style="width:100px;float:left;"></label>
</div>
<div id="div8">
<input type="radio" name="rad" id="radio2" value="Queensland" onchange="myFun(this.value)"><label style="width:100px;float:left;"></label>
</div>
<div id="div9">
<input type="radio" name="rad" id="radio2" value="Maryland" onchange="myFun(this.value)"><label style="width:100px;float:left;"></label>
</div>
<br>
<br>
<br>

<label style="width:100px;float:left;">City:</label> <br>

<div id="div10">
<input type="radio" name="ra" id="c1"  >
</div>

<div id="div11">
<input type="radio" name="ra" id="c1"  >
</div>

<div id="div12">
<input type="radio" name="ra" id="c1"  >
</div>

<div id="div13">
<input type="radio" name="ra" id="c1"  >
</div>

<div id="div14">
<input type="radio"  name="ra" id="c1"  >
</div>

<div id="div15">
<input type="radio" name="ra" id="c1"  >
</div>





<br>
<br>
<br>

<br>
<br>
<br>


<button value="" id="but">OK</button>
</b>
</form>
</body>
</html>

答案 3 :(得分：1)

*？复选框使用ajax jquery并获取*？  来自xml的值

<html>
<head><h1><b><center><i>CHECKBOX</i></center></b></h1></head>
<body  bgcolor="lavender">
<form>
<script src="jquery-1.11.1.js">
</script>
<script>
$(document).ready(function(){
$("#age").blur(function() {
        var test = $(this).val();
        if(test=="")
        {
        $("#dropdown").hide();
        }
        else 
        {
        $("#dropdown").show();
        }

    });

    $.ajax({ 
        type: "GET", 
        url: "count.xml", 
        dataType: "xml", 
        success: function (xml) { 
            $(xml).find('countrylist').each(function () {
                var name = $(this).find('cname1').text(); 
                var option1 = $("<checkbox>" + name + "</checkbox>"); 
                var select=$("#div1");
                select.append(option1);

                var name = $(this).find('cname2').text(); 
                var option2 = $("<checkbox>" + name + "</checkbox>"); 
                var select=$("#div2");
                select.append(option2);

                var name = $(this).find('cname3').text(); 
                var option3 = $("<checkbox>" + name + "</checkbox>"); 
                var select=$("#div3");
                select.append(option3);
            });
        }   
    });
    });


function myCountry(country)
{
alert("HI" +country);   
 $.ajax({ 
            type: "GET", 
            url: "stat.xml", 
            dataType: "xml", 
            success: function (xml) { 
                var select = $('#div4'); 
                $(xml).find('state').each(function () 
                {
                var cval=$(this).find('country').text(); 
                if(country==cval){
                var name = $(this).find('sname').text();    
                select.append($("<label>" + name + "</label>"));
                }
                }); 
                var select = $('#div5'); 
                $(xml).find('state').each(function () 
                {
                var cval=$(this).find('country').text(); 
                if(country==cval){
                var name = $(this).find('sname1').text();   
                select.append($("<label>" + name + "</label>"));
                }
                });
                var select = $('#div6'); 
                $(xml).find('state').each(function () 
                {
                var cval=$(this).find('country').text(); 
                if(country==cval){
                var name = $(this).find('sname2').text();   
                select.append($("<label>" + name + "</label>"));
                }
                });
                var select = $('#div7'); 
                $(xml).find('state').each(function () 
                {
                var cval=$(this).find('country').text(); 
                if(country==cval){
                var name = $(this).find('sname3').text();   
                select.append($("<label>" + name + "</label>"));
                }
                });
                var select = $('#div8'); 
                $(xml).find('state').each(function () 
                {
                var cval=$(this).find('country').text(); 
                if(country==cval){
                var name = $(this).find('sname4').text();   
                select.append($("<label>" + name + "</label>"));
                }
                });
                var select = $('#div9'); 
                $(xml).find('state').each(function () 
                {
                var cval=$(this).find('country').text(); 
                if(country==cval){
                var name = $(this).find('sname5').text();   
                select.append($("<label>" + name + "</label>"));
                }
                });

                        }
     });
}

function myFun(city)

{
alert("hii" +city); 
 $.ajax({ 
            type: "GET", 
            url: "city.xml", 
            dataType: "xml", 
            success: function (xml) { 
                $(xml).find('city').each(function () 
                {
                var sval=$(this).find('state').text(); 

                if(city==sval)
                {
                var select = $('#div10');
                var name = $(this).find('cname').text();    
                select.append($("<label>" + name + "</label>"));
                }


                var sval=$(this).find('state').text(); 

                if(city==sval)
                {
                var select = $('#div11');
                var name = $(this).find('cname1').text();   
                select.append($("<label>" + name + "</label>"));
                }


                var sval=$(this).find('state').text(); 

                if(city==sval)
                {
                var select = $('#div12');
                var name = $(this).find('cname2').text();   
                select.append($("<label>" + name + "</label>"));
                }
                var sval=$(this).find('state').text(); 

                if(city==sval)
                {
                var select = $('#div13');
                var name = $(this).find('cname3').text();   
                select.append($("<label>" + name + "</label>"));
                }

                var sval=$(this).find('state').text(); 

                if(city==sval)
                {
                var select = $('#div14');
                var name = $(this).find('cname4').text();   
                select.append($("<label>" + name + "</label>"));
                }


                var sval=$(this).find('state').text(); 

                if(city==sval)
                {
                var select = $('#div15');
                var name = $(this).find('cname5').text();   
                select.append($("<label>" + name + "</label>"));
                }
                }); 
        }
     });
}

</script>


<br>
<br>
<br>
<label style="width:100px;float:left;">First Name</label> <input type="text" id="name"><br><br>
<label style="width:100px;float:left;">Middle Name</label> <input type="text"><br><br>
<label style="width:100px;float:left;">Last Name</label> <input type="text"><br><br>
<label style="width:100px;float:left;">Address Line1</label> <textarea rows="3" cols="16"></textarea><br><br>
<label style="width:100px;float:left;">Address Line2</label> <textarea rows="3" cols="16"></textarea><br><br>
<label style="width:100px;float:left;">Age</label> <input type="number" id="age" value="a"><br><br>
<div id="dropdown" style="display:none">

<label style="width:100px;float:left;">Country</label> <br>

<div id="div1">
<input type="checkbox" name="country" id="ind" value="India" onclick="myCountry(this.value)">
<label style="width:100px;float:left;"></label> </div><br>

<div id="div2">
<input type="checkbox" name="country" id="usa" value="US" onclick="myCountry(this.value)">
<label style="width:100px;float:left;"></label> </div><br>

<div id="div3">
<input type="checkbox" name="country" id="cnd" value="Australia" onclick="myCountry(this.value)">
<label style="width:100px;float:left;"></label></div>
<br>
<br>
<br>


<label style="width:100px;float:left;">State</label> <br>
<br>
<div id="div4">
<input type="checkbox" id="radio2" value="Tamil Nadu" onchange="myFun(this.value)"><label style="width:100px;float:left;"></label>
</div>
<div id="div5">
<input type="checkbox" id="radio2" value="Andhra Pradesh" onchange="myFun(this.value)"><label style="width:100px;float:left;"></label>
</div>
<div id="div6">
<input type="checkbox" id="radio2" value="Florida" onchange="myFun(this.value)"><label style="width:100px;float:left;"></label>
</div>
<div id="div7">
<input type="checkbox" id="radio2" value="NewJersey" onchange="myFun(this.value)"><label style="width:100px;float:left;"></label>
</div>
<div id="div8">
<input type="checkbox" id="radio2" value="Queensland" onchange="myFun(this.value)"><label style="width:100px;float:left;"></label>
</div>
<div id="div9">
<input type="checkbox" id="radio2" value="Maryland" onchange="myFun(this.value)"><label style="width:100px;float:left;"></label>
</div>
<br>
<br>
<br>

<label style="width:100px;float:left;">City:</label> <br>

<div id="div10">
<input type="checkbox" id="c1"  >
</div>

<div id="div11">
<input type="checkbox" id="c1"  >
</div>

<div id="div12">
<input type="checkbox" id="c1"  >
</div>

<div id="div13">
<input type="checkbox" id="c1"  >
</div>

<div id="div14">
<input type="checkbox" id="c1"  >
</div>

<div id="div15">
<input type="checkbox" id="c1"  >
</div>





<br>
<br>
<br>

<br>
<br>
<br>


<button value="" id="but">OK</button>
</b>
</form>
</body>
</html>

答案 4 :(得分：0)

你可以用同样的东西在同一个php文件上调用ajax 

$('.botondb').click(function() {
            var val = $(this).val();
            $.ajax({
                url: '<?php echo basename($_SERVER['PHP_SELF']); ;?>',
                type: "GET",
                data: {
                    date:1234,
                    ajax:1
                },
               success: function(response) {
                    alert("exito!!! "+ response);
                },
                error: function(xhr) {
                    alert("error");
                }  
            });
        });

这是在你的php文件的顶部：

if (isset($_GET['ajax'])){
            //do your stuff
            echo $ajaxvalue=$_GET['ajax'];
            exit;
    }
相关问题
最新问题