ajax页面中的搜索不起作用


search in ajax page not working

我的ajax页面工作成功,但当我单击搜索按钮时,它重定向到我的登录页面或默认页面。在另一个不使用ajax的页面上,我的搜索按钮可以工作并显示结果。我试图克服这些问题,但它仍然给了我同样的错误。

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']." ";

}

搜索表单已将请求提交到当前页面位置,现在是index.php。您需要添加action="page_2.php",和/或使用Ajax提交表单和更新页面,如下所示:

$('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();
});