怎么使用javascript和ajax把php表单数据插入到数据库里面

js作为脚本语言是不能连接数据库的，所以不可能会添加到数据库，但是你可以用ajax...js...将表单的值传递到另一个页面，然后使用php语言存到数据库，就这样，，看你急着要，，，，，求采纳，，，，求采纳，，，，求采纳，，，，求采纳，，，，求采纳，，，，求采纳，，，，求采纳，，，，求采纳，，，，求采纳，，，，求采纳，，，，求采纳，，，，求采纳，，，，求采纳

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

效果：

代码：

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()

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

---