douju1997
2015-11-14 20:58
浏览 86

使用mongodb提交Ajax表单

i am trying to use ajax submit form but for some reason it doesn't work for me, any suggestions how to fix it.

I'm getting the alert message when I submit but it takes me to another page, what am i doing wrong with ajax request ?

<!DOCTYPE html>
<html>
<head>
<title>Get Data From a MySQL Database Using jQuery and PHP</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    // AJAX forms
    $("#search_form").submit(function(e){
      e.preventDefault();
      //var data = $(this).serialize();
      var method = $(this).attr("method");
      var action = $(this).attr("action");
      var username = $('#username').val(); 
      $.ajax({
        url: 'process.php',
        type: 'POST',
        data: { name: username },
        cache: false,
        success: function(data){
          $('#results').html(data);
        }
      })
    })
  });
  </script>
  </head>
  <body>
   <span>Search by name: </span>
   <form method="POST" action="process.php" id="search_form">
  <input type="text" id="username" name="name">
  <input type="submit" id="submit" value="Search">
   </form>
   <div id="results"></div>
 </body>
  </html>

process.php

<?php
error_reporting(E_ALL);
ini_set('display_errors', '1');
// Check if $_POST is set
if ( empty ( $_POST['name'] ) ) {
 echo "Something wrong!";

 exit;
}
$name = $_POST['name'];
$m = new MongoClient();
//echo "Connection to database successfully";
// select a database
$address = array(
      'name'=>$name,
      'city' => 'test',
      'state' => 'test2',
      'zipcode' => 'test3'
      );

$db = $m->local;
//echo "Database mydb selected";
$collection = $db->user;
//echo "Collection selected succsessfully";
$collection->insert($address);

$user = $collection->findOne(array('name' => $name));
 ?>
<ul>

 <li><?php echo $user['name']; ?>: <?php echo $user['city']; ?></li>
<script>
    alert('test 1234');
 </script>
</ul>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • douqiaosu0280 2015-11-14 21:53
    已采纳

    I had to change:

    $("#search_form").submit(function(e){
    

    to:

    $(document).on('submit', '#search_form', function(){
    

    Now it works fine.

    <!DOCTYPE html>
    <html>
    
    <head>
        <title>Get Data From a MySQL Database Using jQuery and PHP</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script>
            $(document).ready(function() {
                // AJAX forms
                $(document).on('submit', '#search_form', function() {
                    //e.preventDefault();
                    //var data = $(this).serialize();
                    var method = $(this).attr("method");
                    var action = $(this).attr("action");
                    var username = $('#username').val();
                    $.ajax({
                        type: 'POST',
                        url: 'process.php',
                        data: {
                            name: username
                        },
                        cache: false,
                        success: function(data) {
                            $('#results').html(data);
                        }
                    })
                    return false;
                });
            });
        </script>
    </head>
    
    <body>
        <span>Search by name: </span>
        <form method="POST" action="process.php" id="search_form">
            <input type="text" id="username" name="name">
            <input type="submit" id="submit" value="Search">
        </form>
        <div id="results"></div>
    </body>
    
    </html>
    
    点赞 打赏 评论

相关推荐 更多相似问题