如何使用vue js和axios js发帖请求?

时间:2018-04-07 12:19:41

标签: javascript php post vue.js axios

我想使用vue.js插入问题数据。我在哪里使用axios.js来发出POST请求。但不知怎的,它不起作用。我正在寻找许多东西以获得缺陷。但失败了。在我的PHP脚本中它显示没有错,我在邮递员中测试了PHP脚本。 axios没有将post参数传递给给定的API。

这是我的PHP代码

    if ($action == "create") {

    $quiz_id = $_POST['quiz_id'];
    $title = $_POST['title'];
    $opt1 = $_POST['opt1'];
    $opt2 = $_POST['opt2'];
    $opt3 = $_POST['opt3'];
    $opt4 = $_POST['opt4'];
    $ans = $_POST['ans'];
    // exit();
    try {
        $stmt = $dbh->prepare("INSERT INTO question (quiz_id, title, opt1, opt2, opt3, opt4, ans) VALUES (:quiz_id, :title, :opt1, :opt2, :opt3, :opt4, :ans)");
        $stmt->bindParam(':quiz_id', $quiz_id);
        $stmt->bindParam(':title', $title);
        $stmt->bindParam(':opt1', $opt1);
        $stmt->bindParam(':opt2', $opt2);
        $stmt->bindParam(':opt3', $opt3);
        $stmt->bindParam(':opt4', $opt4);
        $stmt->bindParam(':ans', $ans);
        $stmt->execute();
        $result =  "all ok";
    } catch (PDOException $e) {
        $result =  "Couldent insert";
    }

}

这是我的js代码

var app = new Vue({
    el: '#root',
    data: {
        showingAddModal: false,
        showingEditModal: false,
        showingDeleteModal: false,
        errorMessage: "",
        successMessage: "",
        questions: [],
        quiz: 5,
        newQuestion: {quiz_id: "", title: "", opt1: "", opt2: "", opt3: "", opt4: "", ans: ""}
    },
    mounted: function() {
        // console.log();
        this.getAllquestion();

    },

    methods: {

        refresh: function() {
            this.getAllquestion();
        },

        saveQuestion: function() {
            // console.log(this.newQuestion);
            var data = {
                quiz_id: this.quiz,
                title: this.newQuestion.title,
                opt1: this.newQuestion.opt1,
                opt2: this.newQuestion.opt2,
                opt3: this.newQuestion.opt3,
                opt4: this.newQuestion.opt4,
                ans: this.newQuestion.ans
            }
            // console.log(data);
            axios.post("http://localhost/appdb/api.php?action=create", data)
            .then(function(response) {


                if (response.data.error) {
                    app.errorMessage = response.data.message;
                } else {
                    app.getAllquestion();
                    console.log(response.data);
                }
            });
        },


    }


});

并告诉我

<br />
<b>Notice</b>:  Undefined index: quiz_id in <b>C:\xampp\htdocs\appdb\api.php</b> on line <b>25</b><br />
<br />
<b>Notice</b>:  Undefined index: title in <b>C:\xampp\htdocs\appdb\api.php</b> on line <b>26</b><br />
<br />
<b>Notice</b>:  Undefined index: opt1 in <b>C:\xampp\htdocs\appdb\api.php</b> on line <b>27</b><br />
<br />
<b>Notice</b>:  Undefined index: opt2 in <b>C:\xampp\htdocs\appdb\api.php</b> on line <b>28</b><br />
<br />
<b>Notice</b>:  Undefined index: opt3 in <b>C:\xampp\htdocs\appdb\api.php</b> on line <b>29</b><br />
<br />
<b>Notice</b>:  Undefined index: opt4 in <b>C:\xampp\htdocs\appdb\api.php</b> on line <b>30</b><br />
<br />
<b>Notice</b>:  Undefined index: ans in <b>C:\xampp\htdocs\appdb\api.php</b> on line <b>31</b><br /> 

0 个答案:

没有答案