Suche in Ajax-Seite funktioniert nicht

Question

Meine Ajax-Seite funktioniert erfolgreich, aber wenn ich auf die Schaltfläche Suche klickte, wurde es auf meine Anmeldeseite oder Standardseite umgeleitet. Auf der anderen Seite, die keinen Ajax verwendet, funktioniert meine Suchschaltfläche und zeigt das Ergebnis an. Ich habe versucht, die Probleme zu überwinden, aber es gibt mir immer noch denselben Fehler.

index.php:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
<script> 
    $(document).ready(function(){ 
    // Set trigger and container variables 
    var trigger = $('#nav a'), 
     container = $('#content'); 

    // Fire on click 
    trigger.on('click', function(){ 
     // Set $this for re-use. Set target from data attribute 
     var $this = $(this), 
     target = $this.data('target');  

     // Load target page into container 
     container.load(target + '.php'); 

     // Stop normal link behavior 
     return false; 
    }); 
    }); 
</script> 

<!-- Optimize for mobile devices --> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> 


<!-- MAIN CONTENT --> 

    <div id="content"> 

<?php include ('home.php');?> 

    </div> <!-- end content --> 

<div class="clear"></div> 
<!-- FOOTER --> 
<div id="footer"> 
    <div class="menu"> 

<nav id="nav"> 

    <br><br><br><br><a href="#" data-target="home">Muka Depan |</a> 
        <a href="#" data-target="page_1">Status Kerosakan |</a> 
        <a href="#" data-target="page_2">Carian Mudah |</a> 
        <a href="#" data-target="page_3">Pautan Pantas </a><br><br> 

</nav> 


    </div> 
</div> <!-- end footer --> 
<div class="clear"></div> 

home.php:

<form action="checklogin.php" method="POST" id="login-form" class="cmxform" autocomplete="off"> 

      </p> 
      <p> 
           <label>Nombor Personel</label> 
            <input type="text" id="login-username" class="round full-width-input" placeholder="Isi Nombor Personel" name="username" autofocus /> 
      </p> 

      <p> 
          <label>Kata Laluan</label> 
            <input type="password" id="login-password" name="password" placeholder="Isi Kata Laluan" class="round full-width-input" /> 
      </p> 

          <center><a href="forget_pass.php" class="button ">Terlupa Kata Laluan?</a> 

      <br><input type="submit" class="button round blue image-right ic-right-arrow" name="submit" value="LOG MASUK" /> 

      <input type="reset" class="button round blue" name="reset" value=" PADAM" /></center> 
     </fieldset>   
    </form> 

page_2.php:

<form action="" method="post" name="search"> 
Nombor Personel <input name="searchtxt" type="text" class="round my_text_box" placeholder="Isi nombor personel" style="margin-left: 15px" > 
</select><input name="Search" type="submit" class="my_button round blue" value="CARI"> 
</form> <br><br> 
<?php 
$SQL = "SELECT * FROM stock_avail"; 

if(isset($_POST['Search']) AND trim($_POST['searchtxt'])=="") 
{ 
echo "No Information.."; 
} 
if(isset($_POST['Search']) AND trim($_POST['searchtxt'])!="") 
{ 
$SQL = "SELECT * FROM stock_avail WHERE id = ".$_POST['searchtxt']." "; 


} 

Answer 1

Suchformular eingereicht Anfrage auf die aktuelle Seite Lage, jetzt ist es index.php . Sie müssen action="page_2.php" hinzufügen und/oder Form einreichen und aktualisieren Seite mit Ajax, etwa so:

$('form[name=search]').on('submit', function (e) { 
    var target = $(this).attr('action'); 
    var data = $(this).serialize(); 
    $.post(target, data).then(function (page) { 
    $('#content').html(page); 
    }); 
    e.preventDefault(); 
});