ajax怎么实现向数据库添加数据？

ajax主要是用来实现异步 *** 作的，ajax会向一个可以 *** 作数据库的脚本语言（例如php）文件发出请求，同时传递参数和数据，在php文件中，通过插入数据库的代码，实现添加数据，然后返回成功的标志，ajax就根据这个标志来判断是否成功。

ajxa本来就是异步加载数据的！

这是一各JavaScript的ajax原生版

<script type="text/javascript">

var xmlHttpRequest = null

if (window.ActiveXObject) {

xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP")

}

else {

xmlHttpRequest = new XMLHttpRequest()

}

var url = "UserCheck.ashx?userName=1"请求的ashx的地址

xmlHttpRequest.onreadystatechange = readyDo状态改变是指向readyDo函数

xmlHttpRequest.open("GET", url, true)GET方式提交，请求的url地址，异步执行

xmlHttpRequest.send()请求发送

}

function readyDo() {

if (xmlHttpRequest.readyState == 4 &&xmlHttpRequest.status == 200) {

//xmlHttpRequest.responseTex是得到UserCheck.ashx返回的值

var res = xmlHttpRequest.responseText

}

}

分页一般和表格一起用，分页链接作为表格的一部分，将分页链接封装成一个独立的组件，然后作为子组件嵌入到表格组件中，这样比较合理。

效果：

代码：

1.注册一个组件

js

Vue.component('pagination',{

template:'#paginationTpl',

replace:true,

props:['cur','all','pageNum'],

methods:{

//页码点击事件

btnClick:

function(index){

if(index

!=

this.cur){

this.cur

=

index

}

}

},

watch:{

"cur"

:

function(val,oldVal)

{

this.$dispatch('page-to',

val)

}

},

computed:{

indexes

:

function(){

var

list

=

[]

//计算左右页码

var

mid

=

parseInt(this.pageNum

/

2)//中间值

var

left

=

Math.max(this.cur

-

mid,1)

var

right

=

Math.max(this.cur

+

this.pageNum

-

mid

-1,this.pageNum)

if

(right

>

this.all

)

{

right

=

this.all}

while

(left

<=

right){

list.push(left)

left

++

}

return

list

},

showLast:

function(){

return

this.cur

!=

this.all

},

showFirst:

function(){

return

this.cur

!=

1

}

}

})

模板：

<script

type="text/template"

id="paginationTpl">

<nav

v-if="all

>

1">

<ul

class="pagination">

<li

v-if="showFirst"><a

href="javascript:"

@click="cur--">«</a></li>

<li

v-for="index

in

indexes"

:class="{

'active':

cur

==

index}">

<a

@click="btnClick(index)"

href="javascript:">{{

index

}}</a>

</li>

<li

v-if="showLast"><a

@click="cur++"

href="javascript:">»</a></li>

<li><a>共<i>{{all}}</i>页</a></li>

</ul>

</nav>

</script>

HTML：

<div

id='item_list'>

...

<pagination

:cur="1"

:all="pageAll"

:page-num="10"

@page-to="loadList"></pagination>

</div>

当点击分页链接的时候，通过watch

cur，子组件分发

page-to

事件，通过

@page-to="loadList"

标签指定使用父组件

loadList

方法处理事件，父组件接收到page值然后ajax加载数据，根据服务端返回计算并更新自身的

pageAll

值，因为子组件prop通过

:all="pageAll"

动态绑定了父组件的pageAll对象，所以子组件会联动更新。

附上一个简单的表格组件例子:

var

vm

=

new

Vue({

el:

"#item_list",

data:

{

items

:

[],

//分页参数

pageAll:0,

//总页数,根据服务端返回total值计算

perPage:10

//每页数量

},

methods:

{

loadList:function(page){

var

that

=

this

$.ajax({

url

:

"/getList",

type:"post",

data:{"page":page,"perPage":this.perPage},

dataType:"json",

error:function(){alert('请求列表失败')},

success:function(res){

if

(res.status

==

1)

{

that.items

=

res.data.list

that.perPage

=

res.data.perPage

that.pageAll

=

Math.ceil(res.data.total

/

that.perPage)//计算总页数

}

}

})

},

//初始化

init:function(){

this.loadList(1)

}

}

})

vm.init()

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

---