TP5(thinkPHP5)框架基于ajax与后台数据交互操作简单示例

最新推荐文章于 2024-09-18 11:17:01 发布

Karagrade

最新推荐文章于 2024-09-18 11:17:01 发布

阅读量6.6k

点赞数 2

分类专栏： TP5 demo

本文链接：https://blog.csdn.net/coco1118/article/details/83926730

版权

本文介绍了两种在ThinkPHP5框架下，利用AJAX实现前后台数据交互的方法。方法一是通过serialize()函数序列化表单值，创建URL编码文本字符串，配合jQuery进行交互；方法二是利用layui的form.on事件监听，实现数据提交和接收。

摘要由CSDN通过智能技术生成

方法一： serialize() 方法通过序列化表单值，创建 URL 编码文本字符串,这个是jquery提供的方法

前端代码

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>ajax交互</title>
  <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
 <script>
    $('.but').click(function () {
    
        var formData = $("#myform").serialize();//formData值：account=sdf&passwd=sdf
        //serialize() 方法通过序列化表单值，创建 URL 编码文本字符串,这个是jquery提供的方法
        $.ajax({
    
            type: "post",
            url: "{:url('index/index/reg')}",  //数据传输的控制器方法
            data: formData,//这里data传递过去的是序列化以后的字符串
            success: function (data) {
    
                console.log(data);
                $("#content").append(data);//获取成功以后输出返回值
            }
        });
        return false;
    })
</script>
 </head>
 <body>
  <form id="myform">
   <!--这里给表单起个id用于获取表单并序列化-->
   <input type="text"