javascript - AJAX - 覆盖提交功能

标签 javascript jquery html ajax function

我正在尝试创建登录页面,但我坚持将数据作为 JSON 发送到 Cherrypy。尝试覆盖提交按钮,因为当我按下按钮时 AJAX 不会发送任何数据。

旧代码已删除

<小时/>

@EDIT I have changed the code and now I am not sending any data to server (I assume that cuz there is nothing in console after pressing the button)

我的.js

$("#myForm").click(function(){
    var dataString = {};
    dataString.login = $("#login").val();
    dataString.password = $("#password").val();
    $.ajax({
    type: 'POST',
    url: 'http://localhost:8080/login',
    data: JSON.stringify(dataString),
    contentType: 'application/json',
    dataType: 'json',
    success: function(response) {
        console.log(response);
    },
    error: function(response) {
            console.log(response);
    }
  });
});

我的.html

<!DOCTYPE html>
<html>
  <head>
    <link href="style.css" rel="stylesheet">
    <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script src="example.js"></script>
  </head>
<body>
<div class="login-page">
  <div class="form">
      <form id="myForm" class="login-form">
        <input type="text" name="login" id="login" placeholder="login"/>
        <input type="password" name="password" id="password" placeholder="password"/>
        <button form="myForm" type="submit">Login</button>
        <p class="message">Not registered? <a href="#">Create an account</a></p>
      </form>
  </div>
</div>
</body>
</html>

登录页面(数据未加密?)

PIC

  • 链接中有密码?

我的控制台(空?)

PIC

  • 没有登录电话

我在这里做错了什么?

最佳答案

您想要执行发布请求(您还必须在服务器端处理发布):

type: 'POST',

还将其放入您的提交函数中:

var dataString = {};
dataString.login = $("#login").val();
dataString.password = $("#password").val();

所以代码变成:

<form id="myForm" class="login-form">
  <input type="text" id="login" placeholder="login"/>
  <input type="password" id="password" placeholder="password"/>
  <button class="button_submit">login</button>
  <p class="message">Not registered? <a href="#">Create an account</a></p>
</form>

$("#myForm").submit(function(){
    var dataString = {};
    dataString.login = $("#login").val();
    dataString.password = $("#password").val();
    $.ajax({
    type: 'POST',
    url: 'http://localhost:8080/login',
    data: JSON.stringify(dataString),
      contentType: 'application/json',
    dataType: 'json',
    success: function(response) {
        console.log(response);
    },
    error: function(response) {
            console.log(response);
    }
  });
});

关于javascript - AJAX - 覆盖提交功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44491830/

相关文章:

javascript - 如何在点击选项卡内容时获取文本框

javascript - 使图像在 div 内滚动

javascript - 如何在 Chrome 扩展程序中静音外部网页

javascript - Nodejs express4 - 未定义的 session

javascript - 如何将应用程序实例传递给 ExpressJs 中的路由文件?

jquery - 当用户输入时实时搜索 ajax 调用但延迟很小?

Python,美汤,获取所有类名

html - 文本对齐 : center not working on <a> but does on <h1>

javascript - 按 id 值对 li 进行排序

带有意外输出的 JavaScript for/in 循环