2014-02-10 2 views
1

그래서 자바 스크립트가있는 파일과 동일한 파일에서 PHP 함수를 호출하려고합니다.아약스를 사용하여 같은 파일에있는 자바 스크립트에서 PHP 함수 호출

나는 "리"다시

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

?> 

에 새 항목을 추가하는 PHP 함수마다 10 초를 호출하기 위해 노력하고있어가, 난 할 노력하고있어 PHP는 기능마다 10 초를 실행합니다. 어떻게해야합니까? 도와주세요!

+0

을 당신은하지 않을 수 있습니다 응답에는 함수 결과 외에 모든 페이지 내용 (html/js)이 포함되므로 동일한 파일에서 php 함수를 호출하십시오. 이 함수의 코드를 별도의 파일에 저장해야합니다. – hindmost

+0

아약스에 매개 변수를 보내고 그 코드의 맨 꼭대기에있는 새로운 li을 에코하기 위해 그 존재를 사용하십시오. 진정한 블록 안에서 echo와 die()를 사용해야합니다; 스크립트가 모든 페이지 코드를 반환하지 못하도록합니다. –

답변

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, 당신은 아약스에서와 같이 동일한 파일에서 PHP 함수를 호출 할 수 없습니다. 당신은 다른 파일에이 거기 대신에서 호출해야합니다.

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 

function echoTest(){ 
    echo 'item'; 
} 
echotest(); 
?> 
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> 
1

*? 확인란을 사용하여 아약스 JQuery와 PHP의 함수를 호출하고 얻을 필요가? 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> 
0

당신은 당신의 PHP 파일의 상단이

$('.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; 
    } 
관련 문제