ajax2.0获取表格数据提交到服务器

最新推荐文章于 2023-03-16 17:31:53 发布

little_蔷薇

最新推荐文章于 2023-03-16 17:31:53 发布

阅读量441

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： ajax2.0 php jquery

本文链接：https://blog.csdn.net/qq_34559257/article/details/80333292

前端专栏收录该内容

19 篇文章

订阅专栏

本文介绍如何利用Ajax2.0技术实现表单数据的无刷新提交，并通过PHP处理这些数据，最终完成文章的发布流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 $('form button.btn-primary').click(function(event){
      event.preventDefault();
      // ajax新增即可
      // form表单中
      // 自动格式化form表单中的数据
      var sendData = new FormData(document.querySelector('form'));
      $.ajax({
        url:'http://www.baixiu_my.com/admin/API/07.insertPost.php',
        data:sendData,
        type:'post',
        processData:false,// 不格式化数据
        contentType:false,// 不设置请求头
        success:function(backData){
          console.log(backData);
        }
      })
    })

ajax2.0获取数据时，不能设置请求头，也不能格式化数据。并且要new一个FormData。

<form class="row">
        <div class="col-md-9">
          <div class="form-group">
            <label for="title">标题</label>
            <input id="title" class="form-control input-lg" name="title" type="text" placeholder="文章标题">
          </div>
          <div class="form-group">
            <label for="content">标题</label>
            <textarea id="content" class="form-control input-lg" name="content" cols="30" rows="10" placeholder="内容"></textarea>
          </div>
        </div>
        <div class="col-md-3">
          <div class="form-group">
            <label for="slug">别名</label>
            <input id="slug" class="form-control" name="slug" type="text" placeholder="slug">
            <p class="help-block">https://zce.me/post/<strong>slug</strong></p>
          </div>
          <div class="form-group">
            <label for="feature">特色图像</label>
            <!-- show when image chose -->
            <img class="help-block thumbnail" style="display: none">
            <input id="feature" class="form-control" name="feature" type="file">
          </div>
          <div class="form-group">
            <label for="category">所属分类</label>
            <select id="category" class="form-control" name="category">
            </select>
          </div>
          <div class="form-group">
            <label for="created">发布时间</label>
            <input id="created" class="form-control" name="created" type="datetime-local">
          </div>
          <div class="form-group">
            <label for="status">状态</label>
            <select id="status" class="form-control" name="status">
              <option value="drafted">草稿</option>
              <option value="published">已发布</option>
            </select>
          </div>
          <div class="form-group">
            <button class="btn btn-primary" type="submit">保存</button>
          </div>
        </div>
      </form>

上面是对应的HTML代码与相应的点击事件，这里是通过ajax2.0来获取表格中带有name属性的值。php文件如下所示：

<?php
    // 引入函数，这个php文件里面封装了对数据库的数据进行增删改查
    include_once '../../tool/tools.php';
    // 接收数据
    $slug = $_REQUEST['slug'];
    $title = $_REQUEST['title'];
    $created = $_REQUEST['created'];
    $content = $_REQUEST['content'];
    $category = $_REQUEST['category'];
    $status = $_REQUEST['status'];
    // 图片
    $feature = '/uploads/'.my_move_upload_file('feature','../../uploads/');
    // 通过session 获取当前登录的人的 id
    session_start();
    $id = $_SESSION['userInfo']['id'];  
    // 准备sql
    $sql = "insert into posts (slug,title,feature,created,content,category_id,status,user_id) values('$slug','$title','$feature','$created','$content','$category','$status',$id)";
    // echo $sql;    
    // 执行sql
    $rowNum = my_ZSG($sql);
    // echo $rowNum;
    // 判断结果
    if($rowNum==1){
        echo '恭喜你,写好了文章哦';
    }else{
        // 提示用户
        echo '嘤嘤嘤,没有写好 ';
    }
?>

对数据库进行操作的封装见下一篇文章。