使用ajax+jquery+php访问mysql数据库，并且达到不跳转页面的效果。。。

Posted 2023-04-18

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用ajax+jquery+php访问mysql数据库，并且达到不跳转页面的效果。。。相关的知识，希望对你有一定的参考价值。

点击页面的一个按钮，然后表格表格形式显示数据库中数据。（注意：不要跳转页面）
主要要js部分和php部分。。谢谢！！

完整代码如下：

php测试代码

<?php
//数据库只有两个字段  id,name

$handle = mysql_connect('localhost','root','');
mysql_select_db('test',$handle);

$sql="select * from testTbl";
$result = mysql_query($sql);
$arr = array();
while($r= mysql_fetch_assoc($result))

   $arr[]= $r;


echo json_encode($arr);

?>

结果：

参考技术A <input type="button" onclick="aa()" value="点我" />
<div></div>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function aa()

$.post("index.php","id":1,function(data)
$("div").html(data);

)

</script>

<?php

//查数据库
//返回数据
echo "<table><tr><td>1</td><td>2</td></tr><tr><td>1</td><td>2</td></tr></table>"; 参考技术B <input type="button" class="ajax" value="查看数据" />
<div></div>
<script>
$(function()
$('.ajax').click(function()
$('div').load('index.php');
);
);
</script>追问

为什么按钮不见了？？？

本回答被提问者采纳

使用 $.ajax 请求使用 PHP 到 MYSQL 数据库的 jQuery 表单处理

【中文标题】使用 $.ajax 请求使用 PHP 到 MYSQL 数据库的 jQuery 表单处理【英文标题】：jQuery Form Processing With PHP to MYSQL Database Using $.ajax Request 【发布时间】：2010-09-26 16:26:41 【问题描述】：

问题：如何使用 jQuery 和 $.ajax 请求处理表单，以便将数据传递到将其写入数据库的脚本？

问题： 我有一个简单的电子邮件注册表单，处理后会将电子邮件连同当前日期一起添加到 MySQL 数据库中的表中。在没有 jQuery 的情况下处理表单按预期工作，添加电子邮件和日期。使用 jQuery，表单提交成功并返回成功消息。但是，不会向数据库中添加任何数据。

任何见解将不胜感激！

    <!-- PROCESS.PHP -->
    <?php
        // DB info
        $dbhost = '#';
        $dbuser = '#'; 
        $dbpass = '#';
        $dbname = '#';

        // Open connection to db
        $conn = mysql_connect($dbhost, $dbuser, $dbpass) or die ('Error connecting to mysql');
        mysql_select_db($dbname);

        // Form variables
        $email      = $_POST['email'];
        $submitted  = $_POST['submitted'];

        // Clean up
        function cleanData($str) 
            $str = trim($str);
            $str = strip_tags($str);
            $str = strtolower($str);
            return $str;
        
        $email  = cleanData($email);

        $error = "";
        if(isset($submitted)) 
            if($email == '') 
                $error .= '<p class="error">Please enter your email address.</p>' . "\n";
             else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]2,4$", $email)) 
                $error .= '<p class="error">Please enter a valid email address.</p>' . "\n";
            
            if(!$error)
                echo '<p id="signup-success-nojs">You have successfully subscribed!</p>';

                // Add to database
                $add_email  = "INSERT INTO subscribers (email,date) VALUES ('$email',CURDATE())";
                mysql_query($add_email) or die(mysql_error());

            else
                echo $error;
            
        
    ?>

<!-- SAMPLE.PHP -->
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sample</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
        $(document).ready(function() 
                // Email Signup
                $("form#newsletter").submit(function()     
                    var dataStr = $("#newsletter").serialize();
                    alert(dataStr);
                        $.ajax(
                            type: "POST",
                            url: "process.php",
                            data: dataStr,
                            success: function(del)
                                $('form#newsletter').hide();
                                $('#signup-success').fadeIn();
                            
                    );
                return false;
                );             
        ); 
</script>
<style type="text/css">
#email 
    margin-right:2px;
    padding:5px;
    width:145px;
    border-top:1px solid #ccc;
    border-left:1px solid #ccc;
    border-right:1px solid #eee;
    border-bottom:1px solid #eee;
    font-size:14px;
    color:#9e9e9e;
       
#signup-success 
    margin-bottom:20px;
    padding-bottom:10px;
    background:url(../img/css/divider-dots.gif) repeat-x 0 100%;
    display:none;
    
#signup-success p, #signup-success-nojs 
    padding:5px;
    background:#fff;
    border:1px solid #dedede;
    text-align:center;
    font-weight:bold;
    color:#3d7da5;
    
</style>
</head>
<body>
<?php include('process.php'); ?>
<form id="newsletter" class="divider" name="newsletter" method="post" action="">
    <fieldset>
    <input id="email" type="text" name="email" />
    <input id="submit-button" type="image" src="<?php echo $base_url; ?>/assets/img/css/signup.gif"  />
    <input id="submitted" type="hidden" name="submitted" value="true" />
    </fieldset>
</form>
<div id="signup-success"><p>You have successfully subscribed!</p></div>
</body>
</html>

【问题讨论】：

【参考方案1】：

如果使用数据：dataStr，则使用：