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

$( '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 '嘤嘤嘤,没有写好 ';

}

? >

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