基本AJAX异步将值从javascript html传递到_Javascript_Ajax

基本AJAX异步将值从javascript html传递到

javascript ajax

基本AJAX异步将值从javascript html传递到,javascript,ajax,Javascript,Ajax,也许这是一个非常基本的问题，我认为我对AJAX工作原理的理解有很多缺陷，因为我是一个绝对的初学者。有人能帮我解释一下如何让这段代码工作吗我有一个同步的AJAX调用，我想在两者之间传递值。我理解同步功能的概念，但在这种情况下需要将其设置为false，因为在脚本可以继续之前需要验证用户名关于调用方发生的事情有很多例子，但是在被调用方发生的事情上找不到任何东西我的代码大致如下：呼叫方代码： $.ajax({ url: 'http://<domain>/checkpasswo

也许这是一个非常基本的问题，我认为我对AJAX工作原理的理解有很多缺陷，因为我是一个绝对的初学者。有人能帮我解释一下如何让这段代码工作吗

我有一个同步的AJAX调用，我想在两者之间传递值。我理解同步功能的概念，但在这种情况下需要将其设置为false，因为在脚本可以继续之前需要验证用户名

关于调用方发生的事情有很多例子，但是在被调用方发生的事情上找不到任何东西

我的代码大致如下：

呼叫方代码：

$.ajax({
    url: 'http://<domain>/checkpassword.html',
    data: {
        username: $('#username').val(),
        password: $('#password').val()
    },
    type: 'POST',
    asynch: 'false', 
    dataType: 'json',
    success: function(data) {
          alert('User is valid');
         alert('The returned value is' + (?returned value?));
    },
    error: function() {
         alert('User is not accepted');
     }
  });

$.ajax({
网址：'http:///checkpassword.html',
数据：{
用户名：$（'#用户名'）.val（），
密码：$（'#password'）.val（）
},
键入：“POST”，
异步：“false”，
数据类型：“json”，
成功：功能（数据）{
警报（“用户有效”）；
警报（'返回值为'+（？返回值？）；
},
错误：函数（）{
警报（“不接受用户”）；
}
});

调用代码：

<html>
<script>
if (username = 'ABC123') {
   return 'Accepted'
 } else {
   return 'Rejected'
        }
</script>
</html>


如果（用户名='ABC123'）{
返回“已接受”
}否则{
返回“已拒绝”
}

问题:

如何在被调用的代码中获取username的值

如何访问调用代码中的“已接受”或“已拒绝”的文本返回值

更新

根据ppajer的建议

我已将代码更改为调用php文件

调用代码现在看起来像：

<!--Put the following in the <head>-->
<!doctype html>
 <meta http-equiv="X-UA-Compatible" content="IE=11">
<html>
<script>

(window.jQuery || document.write('<script src="http://<domain>/jquery-3.1.1.js"><\x3C/script>'));
(function defer() {
      if (window.jQuery) {
            jQueryLoaded();
      } else {
           setTimeout(function() { defer() }, 50);
      }
 })();

function jQueryLoaded() {

   $("document").ready(function(){
      $.ajax({
           url: 'ajaxcalled.php', //This is the current doc
           type: "POST",
           data: {username: "ABC123", season: "Winter", email: "winter@northpole.com"},
           success: function(data){
                  console.log(data);
                 }
           }); 

 })
}
</script>
</html>


（window.jQuery | | document.write（“”））；
（功能延迟（）{
if（window.jQuery）{
jQueryLoaded（）；
}否则{
setTimeout（函数（）{defer（）}，50）；
}
})();
函数jQueryLoaded（）{
$（“文档”）.ready（函数（）{
$.ajax({
url:'ajaxcalled.php'，//这是当前文档
类型：“POST”，
数据：{用户名：“ABC123”，季节：“冬季”，电子邮件：winter@northpole.com"},
成功：功能（数据）{
控制台日志（数据）；
}
}); 
})
}

调用的php文件现在看起来像

   <!DOCTYPE html>
   <html>
   <body>

   <?php
   $username = $_POST['username'];
   $season= $_POST['season'];
   $email= $_POST['email'];
   echo "<script> alert('My username is '" + $username + "')</script>"; 
   ?>

   </body>
   </html>


HTML不适合后端逻辑。
除了在$.ajax
选项中的“asynch”是async
之外，问题在于您正在请求一个HTML页面，但请求的数据类型要求响应是JSON
您的用例将要求您使用像PHP这样的服务器端语言来处理请求。然后，您可以返回一个正确的JSON响应，AJAX脚本将欣然接受并从中继续
编辑
关于后端代码的几点注意事项
确保处理请求的后端代码只输出您想要作为响应的实际值。无需使用任何
或
标记，因为服务器返回的字符串将传递给$.ajax
的回调。此外，扩展名应该是.php而不是.html。在考虑服务器端逻辑时，完全忘记HTML
例如，如果您的服务器端代码在checkpassword.php

<?php
    $username = $_POST['username'];

    echo $username;
?>

在完整回调中，作为参数传递的response
变量包含服务器返回的全部内容。
在测试不同选项时，选择使用getscript选项
在调用程序中设置全局值，可在被调用程序中访问
username = 'myname';
$.getScript("http://<domain>/ajaxcalled.js", function(){

 alert("Script loaded and executed.");

})

用户名已成功显示
鉴于您拼错了async
，asynch
属性将被忽略（反正是字符串值），因此您实际上没有同步调用。但你真的不应该这样。您已经在使用回调，这很容易！我已经按照建议编写了一个新的示例，但是嵌入式javascript不会执行。请看我问题中修改后的代码。啊，就是这个想法。是的。您不需要回显脚本标记，只需要为$.ajax.complete
的回调分配值。我将更新我的回答很棒，但我试图理解的是如何在php页面上执行jquery。使用页面上的示例代码，脚本未执行。我想在php页面中使用jquery作为验证过程的一部分。如果我可以使用简单的javascript，那么包含更大的脚本应该不会太难。如果您只想执行JS，可以将url
更改为.JS文件，并将数据类型设置为'script'
。同样，在这种情况下，保存所有AJAX骗局并将其包含在原始页面的标记中会更容易。我调用的例程位于不同的域/服务器上，必须在该服务器上执行，因此这不是一个解决方案。我提供的示例有两个方面：1。在一个网页和另一个网页之间传递数据。2.在“另一个”上，需要执行js。对不起，如果我提出的问题中没有这一点。
username = 'myname';
$.getScript("http://<domain>/ajaxcalled.js", function(){

 alert("Script loaded and executed.");

})

alert('hi');
alert(username);