Question

我有index.php点击按钮url.php，ajax加载，无需重新加载页面。现在在'url.php'上有另一个按钮，通过ajax调用data.php。

现在发生了什么：首先打开index.php并点击index.php上的按钮，它会在没有页面加载的情况下加载url.php。但是当我点击Fire me上的按钮url.php时，它会重定向到data.php

如果直接打开url.php，它会执行ajax操作并加载data.php而不会重新加载页面。

我应该在此处进行哪些更改，以便：当我首先打开index.php并单击其上的按钮时，它会加载url.php而不会重新加载页面（这已经发生，下一步有问题）。之后当我点击'url.php'上的按钮时，它应该加载data.php而不加载页面。

的index.php：

    <?php
    session_start();
    $appId      = '178812862';
    $appSecret  = '390c044f268aca44'; // Facebook App Secret
    $return_url = 'dev01.dev/FB/facebook-php-sdk/examples/'; //path to script folder
    ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
     <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">

    </script>
        <title>ThenWat</title>

        function AjaxResponse()
     {
        //alert("2");
        var mydata;         
        CallAfterLogin(mydata, function(send) {
                   });
      } 
    function LodingAnimate() //Show loading Image
    {
        //alert("animate4");    
      //  $("#LoginButton").hide(); //hide login button once user authorize the application
    }

        </script>

   <script type="text/javascript">
                //------------------script 2 starts ---------
                function showUser(form, e) {
                e.preventDefault();
                e.returnValue=false;
                var xmlhttp;
                var sent = form.elements['sent'].value;

                if (window.XMLHttpRequest) {
                    xmlhttp=new XMLHttpRequest();
                } else {
                    // code for IE6, IE5
                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.onreadystatechange = function(e) {
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
                        document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
                    }
                }
                xmlhttp.open(form.method, form.action, true);
                xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 
                xmlhttp.send('sent=' + sent);

                return false;
                }

             </script>


    </head>
    <body style="height: 560px">
    <?php
    if (!isset($_SESSION['logged_in'])) {
    ?>

       <div style="z-index: 1; left: 538px; top: 290px; position: absolute;"> 
        <input class="uibutton confirm large" type="submit" value="Connect with facebook" onclick="AjaxResponse()" > 
        </div>
        <?php
    }
    ?>


    <div id="fb-root"></div>
    <script type="text/javascript">
    window.fbAsyncInit = function() {
    FB.init({
        appId: '<?php
    echo $appId;
    ?>',
        cookie: true,
        xfbml: true,
    //  channelUrl: '<?php
    echo $return_url;
    ?>channel.php',
        oauth: true});};
    (function() {
            //alert("1");
        var e = document.createElement('script');
        e.async = true;
        e.src = document.location.protocol +'//connect.facebook.net/en_US/all.js';
        document.getElementById('fb-root').appendChild(e);}());
    function CallAfterLogin(data,callback){
            //alert("CallafterLogin3");
            FB.login(function(response) {  //---
            if (response.status === "connected")
            {
                LodingAnimate(); 
                FB.api('/me?fields=movies,email', function(mydata) {
                console.log(mydata.email);

                //alert("json-5");
                var json = JSON.stringify(mydata.movies.data);
            //    alert(mydata.movies);
                var a = JSON.parse(json);       
                $.post('movies_db.php',{'myd':a}, function(data) 
                {
                    $.ajax({
                url:'url.php'
                ,async:     true
                ,cache:     false
                ,dataType:  'html'
                ,success:   function(data){
                    $('body').html(data);
                        }
            });        
                });
            console.log(data);

                  }); //--
             } //if
                 }); //---
              } //main function
    </script>
    </body>
    </html>

url.php

<html>
   <head>
      <title>ThenWat</title>

    <meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
    <meta content="utf-8" http-equiv="encoding" />
        </head>
   <body style="height: 560px">
        <form action="data.php" method="POST" onsubmit="return showUser(this, event)">
            <div style="z-index: 1; left: 470px; top: 100px; position: absolute; margin-top: 0px">              
               <label>Enter URL: <input type="text" value="http://www.paulgraham.com/herd.html" name="sent" style="width: 400px; height:40px;" ></label><br/>
            </div>
            <div style="z-index: 1; left: 420px; top: 160px; position: absolute; margin-top: 0px">  <button> Fire me </button>      
            </div>
         </form>
         <div style="z-index: 1; left: 660px; top: 160px; position: absolute; margin-top: 0px"> 
            <button onclick="makeAjaxCall(); return false;" value="View Graph" > View Graph </button>
         </div>
    <h3>
         <div id="txtHint" style="z-index: 1; color:green; left: 200px; top: 270px; position: absolute; margin-top: 0px">       </h3>
         </div>

   </body>
</html>

data.php

<?php
//sent has value "http://www.paulgraham.com/herd.html"
$url=$_POST['sent'];
$doc = new DOMDocument();
libxml_use_internal_errors(true);
$doc->loadHTMLFile($url);
libxml_clear_errors();
$xpath = new DOMXPath($doc);
foreach($xpath->query("//script") as $script) {
    $script->parentNode->removeChild($script);
}
$textContent = $doc->textContent; //inherited from DOMNode
$text=escapeshellarg($textContent);
$test = preg_replace("/[^a-zA-Z]+/", " ", html_entity_decode($text));


//--
    $flag = 0;
    if (preg_match_all('/[^=]*=([^;@]*)/', shell_exec("/home/technoworld/Desktop/b '$test'"),  $matches)){ //Values stored in ma. 
    $x = (int) $matches[1][0]; //optionally cast to int
    $y = (int) $matches[1][1];
    $p= (100*$x)/($x+$y);
    $q= (100*$y)/($x+$y);
    echo "<b>Positive count : $x with $p % </b>";  echo "</br>";
    echo "<b>Negative count  : $y with $q % </b>";

    $con = mysqli_connect('127.0.0.1:3306', 'root', 'root', 'test');
    if (mysqli_connect_errno()) {
    echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$flag=0;
// $sql = "INSERT INTO interest (movies,id) VALUES('".$Name."','".$ID."')";
$sql1 = "INSERT INTO table2 (id,sent,pcount,ncount,flag) VALUES ('".$x."','".$url."','".$x."','".$y."','".$flag."')";
if (mysqli_query($con, $sql1)) {
  // echo "1 record added";
} else {
   die('Error: ' . mysqli_error($con));
}


mysqli_close($con);



}

?>

底线是：创建ajax / jquery系统index.php -> url.php -> data.php。现有index.php -> url.php和url.php -> data.php

Answer 1

在url.php中你有

<form action="data.php" method="POST" onsubmit="showUser(this, event)">

这肯定会导致表格发布。而是写

<form action="data.php" method="POST" onsubmit="return showUser(this, event);">

并添加

return false;

在showUser函数的末尾。

编辑：在问题内容发生各种变化后：

我注意到你正在将整个url.php加载到index.php的主体中。但是，url.php中有<html>，<head>和<script>个标签，我怀疑它们是否被调用。这就是表格提交自己的原因。

正确的方法是：在index.php文件中写下您的所有Javascript，然后通过加载url.php加载新页面内容。我打算写一个例子，但是我看到你更新了你的问题代码，所以我希望这可以解决问题。

Answer 2

感谢@mavrosxristoforos

底线是我需要将按钮上调用的所有函数放入我开始操作的第一个文件中，即index.php不在后续文件中url.php

在多个php页面中嵌套ajax调用

2 个答案: