Vue.js + jQuery Ajax 进行INSERT和SELECT操作

引用Vue.js 和 jQuery.js

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

---

利用jQuery Ajax INSERT数据到数据库

    <div class="content" id="app">
        <div class="banner">
            <img src="img/title.png" alt="" class="title" />
        </div>
        <ul class="list">
            <li>孩子姓名：</li>
            <li>
                <input type="text" v-model="name" maxlength="5" />
            </li>
            <li>家长手机号：</li>
            <li>
                <input type="text" v-model="phone" maxlength="11" v-on:input="numOnly" />
            </li>
            <li>报名校区：</li>
            <li>
                <select v-model="school">
                    <option v-for="item in schoolList" v-bind:value="item">{{item}}</option>
                </select>
            </li>
            <li>
                <button class="btn" @click="submit">提交</button>
            </li>
        </ul>
    </div>
    <script>
        var vv = new Vue({
            el: "#app",
            data: {
                name: "",
                phone: "",
                school: "上海校区",
                schoolList: [
                    "上海校区",
                    "北京校区",
                    "广州校区",
                    "其他",
                ],
            },
            methods: {
                numOnly: function () {
                    this.phone = this.phone.replace(/[^\d]/g, '');
                },
                submit: function () {
                    if ($.trim(vv.name) == "" || $.trim(vv.phone) == "" || $.trim(vv.school) == "") {
                        alert("请填写完整所有信息！");
                        return;
                    }
                    if (!((vv.phone.substr(0, 1) == "1") && (vv.phone.length == 11))) {
                        alert("请输入正确的手机号码！");
                        return;
                    }
                    $.ajax({
                        type: "get",
                        url: "add.ashx",
                        data: { name: vv.name, phone: vv.phone, school: vv.school },
                        success: function (request) {
                            if (request == "ok") {
                                alert("提交成功，我们会尽快与您联系你！");
                                window.location = window.location.href;
                            }
                            else {
                                alert(request);
                            }
                        }
                    });
                },
            }
        });
    </script>

---

利用jQuery Ajax SELECT取出数据并加载到页面

    <div id="app">
        <select v-model="school" style="width:100%" @change="bind">
            <option v-for="item in schoolList" v-bind:value="item">{{item}}</option>
        </select>
        <table border="1" width="100%">
            <tr>
                <th width="25%">学生姓名</th>
                <th width="25%">家长电话</th>
                <th width="25%">报名校区</th>
                <th width="25%">提交时间</th>
            </tr>
            <tr v-for="item in students">
                <td>{{item.name}}</td>
                <td>{{item.phone}}</td>
                <td>{{item.school}}</td>
                <td>{{item.CreateDate}}</td>
            </tr>
        </table>
    </div>
    <script>
        var vv = new Vue({
            el: "#app",
            data: {
                school: "全部校区",
                schoolList: [
                    "全部校区",
                    "上海校区",
                    "北京校区",
                    "广州校区",              
                    "其他",
                ],
                students: []
            },
            created: function () {
                this.bind();
            },
            methods: {
                bind: function () {
                    this.students.splice(0, this.students.length);
                    $.ajax({
                        type: "get",
                        dataType: "json",
                        data: { school: this.school },
                        url: "list.ashx",
                        success: function (data) {
                            $.each(data, function (index, item) {
                                var sth = { name: item.name, phone: item.phone, school: item.school, CreateDate: item.CreateDate };
                                vv.students.push(sth);
                            });
                        }
                    });
                }
            }
        });
    </script>

①Vue.js的初始化页面事件：created:function(){  },

<script>
    el: "#app",
    data: {}，
    created: function () { this.bind(); },
    methods: {  bind: function () {/*...dosth...*/ }  }
</script>

②清空数组内所有数据：this.arr.splice(0, this.arr.length);

 this.students.splice(0, this.students.length);

③ajax获取到json数据的处理：

                  $.ajax({
                        type: "get",
                        dataType: "json",
                        data: { school: this.school },
                        url: "list.ashx",
                        success: function (data) {
                            $.each(data, function (index, item) {
                                var sth = { name: item.name, phone: item.phone, school: item.school, CreateDate: item.CreateDate };
                                vv.students.push(sth);
                            });
                        }
                    });

 

---

UPDATE 操作 参考 INSERT操作，前端调用AJAX是一样的，只是后台处理不同 

相关资料：

vue.js ：{{模板}}|v-text文本|v-html标签|v-show显示|v-if渲染|v-on事件|v-on修饰|v-for循环|v-bind属性|v-model绑定|AJAX调用