#jquery绑定button执行失败
代码是这样的:
$(document).ready(function(){
$("#userlogin").click(function(){
var username = document.getElementById("input_name").value.toString();
var password = document.getElementById("input_password").value.toString();
console.log("1111")
$.post("url",{
M_name:username,
M_password:password
},
function(data,status){
var session = data.session;
if(session == username){
window.location.href="xxxxx";
}
});
});
});
<body>
<button id="userlogin">登录button>
<div class="login">
<form action="{% url 'demo:demo_login' %}" method="post" enctype="multipart/form-data">
{% csrf_token %}
<div class="forms">
<h3 style="color: forestgreen">用户名:h3><label for="input_name">label><input placeholder="Username" type="text" id="input_name" name="M_name"><br>
<h3 style="color: forestgreen">密 码:h3><input placeholder="Password" type="password" id="input_password" name="M_password"><br>
div>
<div class="btn">
<div>
<a style="color: red">{{ result }}a>
<button id="userlogin">登录button>
div>
div>
form>
div>
body>
第一个button点击可以成功执行,第二个button点击之后只能在控制台输出111,后面的post请求和跳转页面都不能执行。求帮助,百度了好几个都没有解决。
在你的 HTML 代码中,有两个具有相同 ID(userlogin)的元素,其中一个是 button,另一个是 a 标签,这可能导致在第二个按钮被单击时出现一些问题。另外,当你单击第二个按钮时,它会默认提交表单,这将重新加载页面并阻止 JavaScript 继续执行。所以你需要做以下几件事情:
删除 a 标签或为其设置不同的 ID。
阻止默认提交表单的行为。可以通过 preventDefault() 方法实现。
下面是修改后的代码:
<script>
$(document).ready(function(){
$("#userlogin").click(function(event){
event.preventDefault();
var username = document.getElementById("input_name").value.toString();
var password = document.getElementById("input_password").value.toString();
console.log("1111")
$.post("url",{
M_name:username,
M_password:password
},
function(data,status){
var session = data.session;
if(session == username){
window.location.href="xxxxx";
}
});
});
});
</script>
<body>
<div class="login">
<form action="{% url 'demo:demo_login' %}" method="post" enctype="multipart/form-data">
{% csrf_token %}
<div class="forms">
<h3 style="color: forestgreen">用户名:</h3><label for="input_name"></label><input placeholder="Username" type="text" id="input_name" name="M_name"><br>
<h3 style="color: forestgreen">密 码:</h3><input placeholder="Password" type="password" id="input_password" name="M_password"><br>
</div>
<div class="btn">
<div>
<a style="color: red">{{ result }}</a>
<button id="userlogin">登录</button>
</div>
</div>
</form>
</div>
</body>
元素的id是唯一的,不能出现重复,你这个代码两个按钮的id重复了
你多写了一个 button