php ajax数据交互不需要form提交

最新推荐文章于 2024-08-10 10:11:23 发布

陆康永

最新推荐文章于 2024-08-10 10:11:23 发布

阅读量3.7k

点赞数 1

分类专栏： php

本文链接：https://blog.csdn.net/xiaomogg/article/details/45076441

版权

php 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

json是前端和后台实现数据交互的种数据格式，前端ajax通过json格式数据提交各php，php转换成php数组来操作，再通过把php数组解码成前端可接收的json格式返回给前端

方式一：

html：

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<div id="login_form">
    <p><label>用户名：</label> <input type="text" class="input" name="user" id="user" /></p>
    <p><label>密 码：</label> <input type="password" class="input" name="pass" id="pass" />
    </p>
    <div class="sub">
        <input type="submit" class="btn" value="登 录" />
    </div>
</div>
<div id="backcall"></div>
<script type="text/javascript">
    $(function(){
        $(".btn").live('click',function(){
            var user = $("#user").val();
            var pass = $("#pass").val();
            $.ajax({
                type: "POST",//提交方式
                url: "ajax.php",//提交的页面
                dataType: "json",//数据格式
                data: {"user":user,"pass":pass}, //提交的数据
                success: function(json)
                {
                        $("#backcall").html(json['user']);//接收PHP返回的数据，
                }
            });
        });
    })
</script>

PHP:

<?php
require_once("conn.php");//载入数据库连接文件
$dd=$_POST;//获取前端提交的数据，这里的数据会转换成数组
$user = $dd['user'];
$pass = $dd['pass'];
$up_mysql="INSERT INTO menber(nickname,password)VALUES('$user','$pass')";
mysql_query($up_mysql);
echo json_encode($dd);//返回转码成json格式的数据个前端获取
?>

方式二：

html:

<html>
<title>php+jquery+ajax+json简单小例子</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<head>
    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $("#subbtn").click(function() {
                var params = $("input").serialize();//序列化数据，前端格式化数据
                alert(params)
                $.ajax({
                    type: "post",
                    url: "dd.php",
                    dataType: "json",
                    data: params,
                    success: function(msg){
                        var backdata = "您提交的姓名为：" + msg.name +
                                "<br /> 您提交的密码为：" + msg.password;
                        $("#backdata").html(backdata);
                        $("#backdata").css({color: "green"});
                    }
                });
            });

        });

    </script>
</head>
<body>
<p><label for="name">姓名：</label>
    <input id="name" name="name" type="text" />
</p>

<p><label for="password">密码：</label>
    <input id="password" name="password" type="password" />
</p>

<span id="backdata"></span>
<p><input id="subbtn" type="button" value="提交数据" /></p>
</body>
</html>

php:

<?php
echo json_encode($_POST);//解码成json格式返回前端获取
?>

陆康永

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

php ajax数据交互 不需要form提交

php ajax数据交互不需要form提交