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

标签 javascript php jquery html ajax

我是 StackOverflow、Web 开发的新手,而且我完成这项作业的时间不多,因此,如果我在理解 Web 开发词汇以及任何答案或提示方面速度较慢,我深表歉意。我在通过 ajax 调用另一个 php 文件时遇到问题。 索引.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>

这是调用该函数时的 JavaScript。 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('');
        });
    });
});

这是我正在尝试加载的 php 文件。用户登录.php:

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

数据库连接.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);
}

我只是想让“userlogin.php”文件通过AJAX 运行。我正在 Chrome 上运行这个东西。我听说在本地文件上使用 AJAX 存在一些问题,但我尝试了 --access-file-from-files 的方法,但没有帮助。我尝试在 FireFox 和 Internet Explorer 上运行它,但仍然没有帮助。我确信我的所有内容都在同一个目录中。我正在使用在线学校服务器来完成这一切。我已经为此烦恼了无数个小时,任何帮助将不胜感激。

最佳答案

仅仅因为您没有通过该方法传递(数据),您 Serialize数据或单独传递它们,我想你会使用第一种方法来节省时间

<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

<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
if(isset($_POST['userid'])){
   $username = $_POST['userid'];
   $pass = $_POST['password'];

   //do your magic now
  }
 ?>

关于javascript - AJAX 成功功能有效,但文件未运行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38689188/

相关文章:

javascript - 无法将 HTMLImageElement 转换为字符串?

javascript - knockout 控制台日志和可观察的未定义

javascript - "jQuery(selector)"和 "$(selector)"和有什么区别?

php - Mysql数据库自增id不按升序自增

php - 使用 composer 在自定义目录中安装包

php - 在时间/日期 PHP 和 ACF 方程中添加额外的一天(对于 WordPress 网站)

javascript - jQuery:检查哈希是否包含

javascript - 按 bool 值排序对象数组,然后按数字排序(javascript)

javascript - 在 vue js 中加载组件之前渲染图像

javascript - 是否有 jQuery/JavaScript 函数可以将 <0 到 500> 的范围调整为 <0 到 1>