87,997
社区成员
发帖
与我相关
我的任务
分享html和js几个疑问
想请问各位，我在index.html中的 <script> </script> 中间嵌入了几个function，有function commit() 然后页面有个提交按钮，当产生onclick时间时会调用function commit() ,commit里面会把用户的数据通过ajax提交到后台php, index.html中都是些select option,input text , table。但没有<form name="", method=>这个，只要index.html中有ajax的东西，提交按钮都没有反应，没有ajax那块代码倒是有反应，想请问这个如何解决？谢谢 (因为我是做linux后台开发的，第一次做点前端的东西，也许对你们很简单，但对于我好难～)
或者能不能给个类似的代码参考一番呢？ 具体功能就是这样: 用户在文本框中输入一些数据，然后按提交，把数据传输到后台
或者能不能给个类似的代码参考一番呢？ 具体功能就是这样: 用户在文本框中输入一些数据，然后按提交，把数据传输到后台
...全文
请发表友善的回复…
发表回复
神之左手 2015-04-01
- 打赏
- 举报
感觉代码问题不少，细节上的东西我就不说了，比如漏了#号导致JQUERY选择器没有找到对应的按钮对象等等。
1.按钮的绑定事件有问题，楼主的按钮HTML代码如下
<input type="button" id="commit" onclick="javascript:commit()" value="提交" />
从中可以看到，为这个button绑定了一个onclick事件，如果这个事件是直接提交表单则问题不大，但这里的问题就出在这个按钮的点击是调用一个commit()的函数，这个函数的大致能容呢，是在为这个按钮绑定一个点击事件，试问：
一开始执行的时候没有进行点击的人为交互，这个commit()的函数会执行吗？答案是显然的，不会执行，不会执行就会导致按钮的点击事件无法做到提交表单（或者说调用AJAX），按钮事件仅停留在写在按钮内部的那个onclick="javascript:...." 所以第一次按这个按钮会没有响应，因为第一次调用commit函数所做的工作是为这个按钮再次绑定一个事件，而不会执行提交AJAX，然后你按你二次的时候就会执行了（如果其他代码没有错误的话）所以绑定机制错误了
2.还是绑定机制的问题，onclick每次按下都会调用commit函数为这个按钮绑定一个click事件，如果非jquery框架的绑定，同一个事件后绑定的会把前面绑定的覆盖掉，而在jquery下则不是这样，用click(function(){})这种方法绑定的事件会一个一个存放在事件队列里面，导致一次点击执行多次绑定函数。关于这个问题我已经验证过，所以如果按照需要调用函数来为某个DOM元素绑定事件，建议使用bind和unbind的jquery绑定方法和解除。
最后解决方法，在</body>结束标签之前嵌入<script type="text/javascript">标签，在这个标签内部为这个按钮DOM绑定事件
$("#按钮").click(......);
为什么要加载最后，顺序代码执行的时候避免由于html代码还未读到，没有找到需要绑定的DOM元素导致出错，所以放在最后就万无一失，当然最好的办法是在document.ready事件内部书写
然后把原先input type="button"的onclick去掉，最后在检查下其他细节错误，应该就不会有问题
回顾一下整体，js中的事件绑定也是有一定讲究的，不要随心所欲
娃都会打酱油了 2015-04-01
- 打赏
- 举报
$('#commit')
冰雨无痕 2015-04-01
- 打赏
- 举报
$('commit') = $('#commit')
success:function (msg){
alert("Data Saved: " + msg);
}, 删掉
这里应该是data漏了。
data: {
name:"ege",
age:"19",
sex:"female"
},
阿狸Ahri 2015-04-01
- 打赏
- 举报
commit前面要个#，
参数还有漏了 data:
目测 那个success方法后面结束的}那里还多了 一个逗号
重生是希望 2015-03-30
- 打赏
- 举报
$('commit').click(function ()){ 这里有问题， $('commit')里放的是选择器
如果是ID选择器就换成
$('#commit').click(function ()){
如果是CLASS选择器就换成
$('.commit').click(function ()){
试试吧
bbjiabcd 2015-03-30
- 打赏
- 举报
$(function(){
$('#commit').click(function (){
//var
//var
//var
alert("llllllllllll");
$.ajax({
type: "POST",
url:"http://ip:port/test.php",
data:{
name:"ege",
age:"19",
sex:"female"
},
success:function (msg){
alert("Data Saved: " + msg);
}
});
});
});
bbjiabcd 2015-03-30
- 打赏
- 举报
你代码的问题不少，自己检查一下吧，建议你看一下jQuery的帮助文档
<script>
$(function(){
$('commit').click(function (){
//var
//var
//var
alert("llllllllllll");
$.ajax({
type: "POST",
url:"http://ip:port/test.php",
data:{
name:"ege",
age:"19",
sex:"female"
},
success:function (msg){
alert("Data Saved: " + msg);
}
});
});
});
</script>
<input type="button" id="commit" value="提交" />
slwsss 2015-03-29
- 打赏
- 举报
function commit(){
//..
//var
//var
//var
alert("llllllllllll");
$.ajax({
type: "POST",
url:"http://ip:port/test.php",
data: {
name:"ege",
age:"19",
sex:"female"
},
success:function (msg){
alert("Data Saved: " + msg);
},
});
}
coding_leezam 2015-03-29
- 打赏
- 举报
<body>
<form action=... method="post>
<table>
//...
</table>
</form>
<script>
function commit(){
//..
$('commit').click(function ()){
//var
//var
//var
alert("llllllllllll");
$.ajax({
type: "POST",
url:"http://ip:port/test.php",
{
name:"ege",
age:"19",
sex:"female"
},
success:function (msg){
alert("Data Saved: " + msg);
},
});
});
}
</script>
<input type="button" id="commit" onclick="javascript:commit()" value="提交" />
</body>
只要把ajax那块代码添加进去，按提交就不行了，没有反应,去掉至少有返回
slwsss 2015-03-28
- 打赏
- 举报
脚本出错了吧，调试下
贴下html
