Question

我正在使用Rapid API来保存用户的电子邮件和密码。我的send函数被调用onclick，但我不认为该程序正在通过AJAX调用运行。

我不知道该怎么做。请帮忙。

signup.html

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ShapeBootstrap Clean Template</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="">


    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/bootstrap-responsive.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

  <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
  <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
  <![endif]-->

  <!-- Fav and touch icons -->
  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/apple-touch-icon-144-precomposed.png">
  <link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/apple-touch-icon-114-precomposed.png">
  <link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/apple-touch-icon-72-precomposed.png">
  <link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-57-precomposed.png">
  <link rel="shortcut icon" href="img/favicon.png">



    <!-- SCRIPT
    ============================================================-->
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.js"></script>
    <script src = "script.js"></script>

</head>

<body>

  ...

<div class="container">

  <div class="form-wrap">
        <div class="tabs">
            <h3 class="signup-tab"><a class="active" href="#signup-tab-content">Sign Up</a></h3>
            <h3 class="login-tab"><a href="#login-tab-content">Sign In</a></h3>
        </div><!--.tabs-->

        <div class="tabs-content">
            <div id="signup-tab-content" class="active">
                <form class="signup-form">
                    <input type="email" class="input" id="user_email" autocomplete="on" placeholder="Email">
                    <input type="password" class="input" id="user_password" autocomplete="on" placeholder="Password">
                    <button onclick="send()" class="button">Sign Up</button>
                </form><!--.login-form-->
                <div class="help-text">
                    <p>By signing up, you agree to our</p>
                    <p><a href="#">Terms of service</a></p>
                </div><!--.help-text-->
            </div><!--.signup-tab-content-->

            <div id="login-tab-content">
                <form class="login-form" action="" method="post">
                    <input type="text" class="input" id="user_login_email" autocomplete="off" placeholder="Email">
                    <input type="password" class="input" id="user_pass" autocomplete="off" placeholder="Password">
          <input type="password" class="input" id="user_topic" autocomplete="off" placeholder="Your course choice">

                    <input type="submit" class="button" value="Login">

                </form><!--.login-form-->
            </div><!--.login-tab-content-->
        </div><!--.tabs-content-->
    </div><!--.form-wrap-->
</div>



<!--Footer
==========================-->

<footer>
    <div class="container">
      <div class="row">
        <div class="span6">Copyright &copy 2013 Shapebootstrap | All Rights Reserved  <br>
        <small>Aliquam tincidunt mauris eu risus.</small>
        </div>
        <div class="span6">
            <div class="social pull-right">
                <a href="#"><img src="img/social/googleplus.png" alt=""></a>
                <a href="#"><img src="img/social/dribbble.png" alt=""></a>
                <a href="#"><img src="img/social/twitter.png" alt=""></a>
                <a href="#"><img src="img/social/dribbble.png" alt=""></a>
                <a href="#"><img src="img/social/rss.png" alt=""></a>
            </div>
        </div>
      </div>
    </div>
</footer>

<!--/.Footer-->
<script>
jQuery(document).ready(function($) {
tab = $('.tabs h3 a');

tab.on('click', function(event) {
  event.preventDefault();
  tab.removeClass('active');
  $(this).addClass('active');

  tab_content = $(this).attr('href');
  $('div[id$="tab-content"]').removeClass('active');
  $(tab_content).addClass('active');
});
});
</script>
</body>
</html>

的script.js

        var emailInput;
    var passwordInput;
    function send() {
        emailInput = document.getElementById("user_email").value;
        passwordInput = document.getElementById("user_password").valu

e;

    jQuery.ajax({
    url: "",
    type: "POST",
    contentType: "application/x-www-form-urlencoded",
    data: {
    "email": emailInput,
    "password": passwordInput,
    },
    })
    .done(function(data, textStatus, jqXHR) {
    console.log("HTTP Request Succeeded: " + jqXHR.status);
    console.log(data);
    })
    .fail(function(jqXHR, textStatus, errorThrown) {
    console.log("HTTP Request Failed");
    })
    .always(function() {
    /* ... */
    });

            }

Answer 1

使用以下更改：

1）将你的jquery.js脚本放在bootstrap.min.js

之上

2）指定按钮的类型属性。注册。这是因为当没有指定类型属性时，不同的浏览器会以不同的方式解释按钮类型

3）删除$ .ajax中的内容类型。这是因为，默认情况下，jquery将请求发送为＆＃39; application / x-www-form-urlencoded＆＃39;

4）删除数据值的双引号 - 例如。 data：{email：emailInput，password：passwordInput，};

jQuery AJAX调用没有成功/运行

1 个答案: