以点击按钮,改变按钮元素的内容为案例,点击的时候 ”按钮“ 变为 ”hello“
1、通过js获取元素,例如,获取元素btn按钮
2、通过js,当点击按钮的时候,改变原来的值为“hello”
3、运行效果如下:
4、点击按钮之后的效果:
完整的html代码如下:
<!doctype html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.wrap{
width:400px
height:300px
background:#000
position:relative
}
a.btn1{
display:block
width:140px
height:40px
line-height:40px
text-align:center
background:#ff0099
color:#fff
position:absolute
left:100px
top:100px
}
</style>
</head>
<body>
<div class="wrap">
<a href="javascript:" class="btn1" id="btn">按钮</a>
</div>
<script type="text/javascript">
var oBtn= document.getElementById("btn")
oBtn.onclick=function(){
oBtn.innerHTML="hello"
}
</script>
</body>
</html>
这个只需要用ajax来完成就行了,我这里用jquery的ajax方法,传递给PHP做个范本 能否看懂 就看你造化了,提醒一下 因为包含了php的代码 你需要在运行环境下才能看到效果
首先建立一个index.html
<!doctype html><html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<div class="divCon">一月七号</div>
<input type="button" value="提交" class="button">
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(".button").click(function(){
var con = $(".divCon").text()
$.ajax({
type:'POST',
url:"./submit.php",
data:{"cons":con},
dataType:"json",
success: function(data){
alert(data)//弹出返回值
},
error: function(data){
//alert(data.responseText)
}
})
})
</script>
</body>
</html>
再建立一个submit.php
<?php$con = $_POST['cons']//获取前台传递的数据
if(!empty($con)){//判断是否不合法数据,empty 具体用法 请百度
exit(json_encode("您传输的数据是:{$con}"))//这里是给前台的返回值
}
//现在数据得到了 就可以根据PHP操作数据库的代码来进行操作就行了