在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ axios進(jìn)行后臺傳參時,不能將參數(shù)傳給后臺

axios進(jìn)行后臺傳參時,不能將參數(shù)傳給后臺

在實(shí)現(xiàn)增刪改查的過程中,點(diǎn)擊查詢按鈕,向后臺發(fā)送請求,后臺接受不到前端傳過去的參數(shù)
使用的 URLSearchParams 方法
代碼如下:

<el-form :model="filters">
<el-form-item prop="author">
  <!--@keyup.enter.native="getAuthor"-->
  <el-input v-model="filters.author" placeholder="作者"
            @keyup.enter.native="getUsers"></el-input>
</el-form-item>
<el-form-item>
  <el-button type="primary" @click="getUsers">查詢</el-button>
</el-form-item>
</el-form>

<el-col :span="24" style="background: #ff0">
      <el-table border
        :data="bookData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
        :loading="listLoading"
        style="width: 100%; text-align: left;">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column type="index" label="#" width="60"></el-table-column>
        <el-table-column prop="author" label="作者" width="200"></el-table-column>
        <el-table-column prop="title" label="書名" width="200"></el-table-column>
        <el-table-column prop="price" label="單價" width="120"></el-table-column>
        <el-table-column prop="publish" label="出版社" width="200"></el-table-column>
        <el-table-column prop="publishDate" label="出版日期"></el-table-column>
        <el-table-column label="操作" width="250">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">編輯</el-button>
            <el-button size="mini" type="danger"
              @click="removeUser(scope.$index, scope.row)">刪除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-col>

js 代碼如下:

export default {
    name: "add",
    data() {
      return {
        bookData: [],
        filters: {
          author: '',
        },
        total: 0,
        pageSize: 0,
        currentPage: 1,
        listLoading: false,
        dialogCreateVisible: false,
        addFormLabelWidth: '80px',
        addLoading: false,
      }
    },
    methods: {
      // 改變頁碼
      handleCurrentChange(val) {
        this.currentPage = val;
        this.getUsers();
      },
      // 改變每頁顯示的數(shù)量
      handleSizeChange(val) {
        this.pageSize = val;
      },
      //  獲取用戶列表
      getUsers() {
        let para = new URLSearchParams();
        para.append("authors", this.filters.author);
      
        this.listLoading = true;
        this.$ajax({
          methods: 'post',
          url: url+'/InfoManage/bookListByTAP',
          data: para ,
        }).then(res => {
          this.total = res.data.length;
          this.pageSize = 20;  // 每頁展示的條目數(shù)
          this.bookData = res.data;
          this.listLoading = false;
          console.log(res.data);
          console.log("當(dāng)前的作者名:"+this.filters.authors);
        }).catch( err => {
          console.log(err);
        })
      },
    mounted() {
      this.getUsers();
    }
  }

按照這種方法進(jìn)行前后端交互,可以將參數(shù)傳過去,但是不知道為什么,在查詢時,不能成功將參數(shù)傳遞過去,有人可以幫忙解答一下疑惑嗎?

回答
編輯回答
扯機(jī)薄

$ajax 是 axios 還是 jquery 都是 method屬性...

2017年4月1日 19:02