2016-07-31 82 views
0

我是StackOverflow,web開發的新手,我對這項任務的準備時間不夠,所以我很抱歉,如果我在理解Web開發詞彙方面有點慢以及任何答案或提示。我在通過ajax調用另一個php文件時遇到了麻煩。 的index.php:AJAX成功函數可以工作,但文件沒有運行

<!--------------------------- 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文件,我試圖加載。 userlogin.php:

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

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); 
} 

我只是試圖讓 「userlogin.php」 文件通過AJAX運行。我在Chrome上運行這個東西。我聽說在本地文件上使用AJAX存在一些問題,但我嘗試過--access-file-from-files,它並沒有幫助。我試着在FireFox和Internet Explorer上運行它,但它仍然沒有幫助。我確定我擁有同一個目錄中的所有內容。我正在使用在線學校服務器來做這些事情。我一直在無休止地傷害了我的頭,任何幫助都將不勝感激。

+0

已包含所有在這裏的代碼?你的ajax函數似乎沒有傳遞任何表單數據。你有沒有把它從你的例子中排除?如果你把它放回來,因爲它很混亂。如果這是您的所有代碼,則需要傳遞表單數據。您目前沒有發佈任何數據。 –

+0

鉻上的標誌,鉻應該是' - 從文件中允許文件訪問'。 '.append()'中的'html'字符串似乎沒有正確連接以避免語法錯誤。 'if($(「#Register」)。click())'的預期結果是什麼? – guest271314

回答

0

.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

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

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

+0

它正在運行成功的消息,但它仍然沒有運行userlogin.php文件:( – Aura

+0

您是否嘗試'POST'數據到'userlogin.php'? – guest271314

+0

我很難理解「Post」和「Get」,所以我只是解釋我想在userlogin.php中做什麼,我只是想驗證用戶輸入到OpenRegister函數的「輸入」中的用戶名和密碼。 – Aura

1

很簡單,因爲你不及格(數據),通過該方法,無論你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 
    } 
?> 
+0

這是通過成功的功能,但它仍然不運行的PHP文件出於某種原因。 – Aura

+0

包裝輸入並粘貼我給你的代碼,記得在表單中添加(id)並更改值$(「#formID」)。serialize();根據形式(編號) – developerbh

+0

我想我照你所說的做了: 結果有輸入出現 – Aura

相關問題