简体   繁体   English

AJAX成功功能有效,但文件未运行

[英]AJAX success function works, but file isn't running

I'm new to StackOverflow, web development, and I'm low on time for this assignment, so I apologize if I'm a bit slower at understanding web development vocabulary and any answers or tips. 我是StackOverflow,Web开发的新手,而且我的工作时间很短,所以如果我对Web开发的词汇以及任何答案或技巧的理解较慢,我深表歉意。 I'm having trouble with calling another php file through ajax. 我在通过ajax调用另一个php文件时遇到麻烦。 index.php: index.php:

<!--------------------------- HTML STARTUP ----------------------------------->

<!DOCTYPE html>
<html>
    <head>        
        <link type="text/css" rel="stylesheet" href="finalproject.css" />

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script type="text/javascript" src="finalproject.js"></script>

        <title>Final Project</title>
    </head>
    <body>

<!--------------------------- LOGIN ------------------------------------------>

<?php
    require_once 'dbconnection.php';

//----------------------- CREATE USERS TABLE -----------------------------------

$userspass = "CREATE TABLE usersPass (
    userID VARCHAR(60),
    password VARCHAR(60)
);";

$connected->query($userspass);

$selectAllInfo = "SELECT * FROM usersPass;";
$connected->query($selectAllInfo);

//-------------------------- LOG IN OR REGISTER --------------------------------
?>
    <form id="trial"><button onclick="OpenRegister()">Sign Up!</button>
    <script>
$(document).on("click" , "#Register", function(e)
    {
       var datastring = $("#trial").serialize();
        $.ajax({
            type: 'POST',
            url: 'userlogin.php',
            data: datastring,
            success: function(data){
            alert('Sign Up function is a success!');
        }
    });
    e.preventDefault();
});
        </script></form>
    <br/><br/>
    <button onclick="InputInfo()">Login</button> 

<?php        
$connected->close();
?>

</body>
</html>

And here's the JavaScript when the function is called. 这是调用函数时的JavaScript。 finalproject.js: finalproject.js:

/*jslint browser: true*/
/*global $, jQuery, alert*/

function OpenRegister() {
'use strict';

$('form').append("<div id=SignInContainer>
<span style='font-size: 20px'>UserID</span>
<input type='text' name='UserID' value='Type userID here...'>
<span style='font-size: 20px'>Password</span>
<input type='text' name='UserID' value='Type password here...'>
<button id='Register'>Submit</button>
</div>");
}

$(document).ready(function () {
    'use strict';

    $(document).on('focus', 'input', function () {
        $('input').focus(function () {
            $(this).val('');
        });
    });
});

And this is the php file I'm trying to load. 这是我要加载的php文件。 userlogin.php: userlogin.php:

<?php echo "If this displays, you win." ?>

dbconnection.php dbconnection.php

<?php
$connected = new mysqli('localhost', 'Username', 'Password', 'Username');
mysqli_select_db($connected, 'cferna50');

// Check connection
if ($connected->connect_error) {
    die("Connection failed: " . $connected->connect_error);
}

I'm just trying to get the "userlogin.php"file to run through AJAX. 我只是想让“ userlogin.php”文件通过AJAX运行。 I'm running this thing on Chrome. 我正在Chrome上运行此程序。 I've heard that there is a bit of a problem with using AJAX on local files, but I tried that --access-file-from-files thing and it didn't help. 我听说在本地文件上使用AJAX有点问题,但是我尝试了--access-file-from-files的操作,但没有帮助。 I tried running it on FireFox and Internet Explorer and it still doesn't help. 我尝试在FireFox和Internet Explorer上运行它,但仍然无济于事。 I'm sure I have everything in the same directory. 我确定我所有内容都在同一目录中。 I'm using an online school server thing to do all this. 我正在使用在线学校服务器来完成所有这一切。 I've been hurting my head over this for endless hours, any help would GREATLY be appreciated. 我为此一直伤脑筋,任何帮助将不胜感激。

Simply because you are not passing (data) through the method, either you Serialize the data or pass them individually, and i suppose you will use the first method to save time 仅仅因为您没有通过方法传递(数据),您要么序列化数据,要么单独传递它们,我想您将使用第一种方法来节省时间

<script>
    $(document).on("submit","#loginForm", function(e)
        {
           var datastring = $("#loginForm").serialize();
            $.ajax({
                type: 'POST',
                url: 'userlogin.php',
                data: datastring,
                success: function(data){
                 alert(data);
                //or
                //alert('Sign Up function is a success!');
            },
                error: function(){
                 alert("error handling");
            }
        });
        e.preventDefault();
    });
</script>

HTML 的HTML

<form id="loginForm" method="POST">
  <input type="text" name="userid" id="userid" placeholder="user ID" />
  <input type="text" name="password" id="password" placeholder="Password" />
  <button type="submit" >Submit</button>
</form>

PHP 的PHP

<?php
if(isset($_POST['userid'])){
   $username = $_POST['userid'];
   $pass = $_POST['password'];

   //do your magic now
  }
 ?>

Correct concatenation of html string at .append() remove if($("#Register").click()) .append()处正确连接html字符串,删除if($("#Register").click())

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  function SignUp() {
  if ($("[name=username]").val().length 
     && $("[name=password]").val().length) {
    $.ajax({
      type: 'POST',
      url: 'userlogin.php',
      data: {
          username: $("[name=username]").val(),
          password: $("[name=password]").val()
      },
      success: function(data) {
        alert('Sign Up function is a success!');
      },
      error: function() {
        alert("stacsnippets success")
      }
    });
    }
  }
</script>
<script>
  function OpenRegister() {
    'use strict';

    $('body').append("<div id=SignInContainer>" 
      + "<span style='font-size: 20px'>UserID</span>" 
      + "<input type='text' name='username' placeholder='Type userID here...'>" 
      + "<span style='font-size: 20px'>Password</span>" 
      + "<input type='password' name='password' placeholder='Type password here...'>" 
      + "<button onclick='SignUp()' id='Register'>Submit</button>" 
      + "</div>");
  }
</script>
<button onclick="OpenRegister()">Sign Up!</button>

php 的PHP

if (isset($_POST["username"]) && isset($_POST["password"])) {
  // do username, password validation stuff here
}

jsfiddle https://jsfiddle.net/qnrnn5b5/ jsfiddle https://jsfiddle.net/qnrnn5b5/

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM