jQuery AJAX вызов не преуспевает/работает

-1

Я использую Rapid API для сохранения моих пользователей и паролей. Моя функция отправки вызывается onclick, но я не думаю, что программа работает через вызов AJAX.jQuery 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() { 
    /* ... */ 
    }); 

      }

источник

2016-05-21 Han

Почему вы загружаете файл jquery.js два раза? Также script.js два раза в верхнем и нижнем колонтитуле – Poria

Итак, он работает сейчас? – Poria

Нет, он не работает @Poria. – Han

Используйте эти изменения:

1) Поместите jquery.js сценарий выше bootstrap.min.js

2) Укажите атрибут типа для кнопки. Sign Up.This coz различные браузеры интерпретируют тип кнопки по-разному, если не указан атрибут типа

3) Удалите контент-тип в $ .ajax. Это coz, по умолчанию jquery отправляет запрос как «application/x-www-form-urlencoded»

4) Удалить двойные кавычки значений данных - например. данные: {email: emailInput, password: passwordInput,};

источник

2016-05-21 15:07:05

jQuery AJAX вызов не преуспевает/работает

ответ

Смежные вопросы