如何将js文件链接到php文件

时间:2016-07-27 07:03:38

标签: javascript php

我试图将我的php文件的表单数据发送到js文件,但我不能确定php文件是由js文件调用的。

<!DOCTYPE html>
<html class="hide-sidebar ls-bottom-footer" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Learning</title>

<link href="css/vendor.min.css" rel="stylesheet">
<script type ="text/javascript" src="api/serve.js"></script>

<link href="css/theme-core.min.css" rel="stylesheet">

<link href="css/module-essentials.min.css" rel="stylesheet" />
<link href="css/module-material.min.css" rel="stylesheet" />
<link href="css/module-layout.min.css" rel="stylesheet" />
<link href="css/module-sidebar.min.css" rel="stylesheet" />
<link href="css/module-sidebar-skins.min.css" rel="stylesheet" />
<link href="css/module-navbar.min.css" rel="stylesheet" />
<link href="css/module-messages.min.css" rel="stylesheet" />
<link href="css/module-carousel-slick.min.css" rel="stylesheet" />
<link href="css/module-charts.min.css" rel="stylesheet" />
<link href="css/module-maps.min.css" rel="stylesheet" />
<link href="css/module-colors-alerts.min.css" rel="stylesheet" />
<link href="css/module-colors-background.min.css" rel="stylesheet" />
<link href="css/module-colors-buttons.min.css" rel="stylesheet" />
<link href="css/module-colors-text.min.css" rel="stylesheet" />

 <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js">   </script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

  </head>
 <body class="login">
<div id="content">
    <div class="container-fluid">
        <div class="lock-container">
            <div class="panel panel-default text-center paper-shadow" data-z="0.5">
                <h1 class="text-display-1">Create account</h1>
                <div class="panel-body">
                    <!-- Signup -->
                    <form id="signup" action="" method="POST">
                        <div class="form-group">
                            <div class="form-control-material">
                                <input id="firstName" type="text"   class="form-control"  name="firstname" value="">
                                <label for="firstName">First name</label>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="form-control-material">
                                <input id="lastName" type="text" class="form-control" name="lastName" value="">
                                <label for="lastName">Last name</label>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="form-control-material">
                                <input id="email" type="email" class="form-control" name="email" value="">
                                <label for="email">Email address</label>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="form-control-material">
                                <input id="password" type="password" class="form-control" name="password" value="">
                                <label for="password">Password</label>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="form-control-material">
                                <input id="passwordConfirmation" type="password" class="form-control" placeholder="Password Confirmation">
                                <label for="passwordConfirmation">Re-type password</label>
                            </div>
                        </div>
                        <div class="form-group text-center">
                            <div class="checkbox">
                                <input type="checkbox" id="agree" />
                                <label for="agree">* I Agree with <a href="#">Terms &amp; Conditions!</a></label>
                            </div>
                        </div>
                        <div class="text-center">

                            <button id="submit" class="btn btn-primary" type="submit"  >Create an Account</button>
                        </div>
                    </form>
                    <!-- //Signup -->
                </div>
            </div>
        </div>
    </div>
</div>

<script>
var colors = {
    "danger-color": "#e74c3c",
    "success-color": "#81b53e",
    "warning-color": "#f0ad4e",
    "inverse-color": "#2c3e50",
    "info-color": "#2d7cb5",
    "default-color": "#6e7882",
    "default-light-color": "#cfd9db",
    "purple-color": "#9D8AC7",
    "mustard-color": "#d4d171",
    "lightred-color": "#e15258",
    "body-bg": "#f6f6f6"
};
var config = {
    theme: "html",
    skins: {
        "default": {
            "primary-color": "#42a5f5"
        }
    }
};
</script>
<!-- Separate Vendor Script Bundles -->
<script src="js/vendor-core.min.js"></script>
<script src="js/vendor-countdown.min.js"></script>
<script src="js/vendor-tables.min.js"></script>
<script src="js/vendor-forms.min.js"></script>
<script src="js/vendor-carousel-slick.min.js"></script>
<script src="js/vendor-player.min.js"></script>
<script src="js/vendor-charts-flot.min.js"></script>
<script src="js/vendor-nestable.min.js"></script>

<script src="js/module-essentials.min.js"></script>
<script src="js/module-material.min.js"></script>
<script src="js/module-layout.min.js"></script>
<script src="js/module-sidebar.min.js"></script>
<script src="js/module-carousel-slick.min.js"></script>
<script src="js/module-player.min.js"></script>
<script src="js/module-messages.min.js"></script>
<script src="js/module-maps-google.min.js"></script>
<script src="js/module-charts-flot.min.js"></script>

<script src="js/theme-core.min.js"></script>
 </body>
</html>\

我的js文件就像下面一样。 的 serve.js

$(document).ready(function(){
        $("form").click( function(e){


            e.preventDefault();

            // get values from textboxs  
            var name = $('#firstName').val();

            var lname = $('#lastName').val();
            var mail = $('#email').val();
            var password = $('#password').val();
            var confpass = $('#passwordConfirmation');
           $.ajax({
          url: "api/learnapi.php",
          type: "post",
         dataType: "json",
        data: {type: "signup", Name: name, Lname: lname, Pass: password,  Email: mail,Pass1:confpass },
        //type: should be same in server code, otherwise code will not run
        ContentType: "application/json",
        success: function (response) {
            alert(JSON.stringify(response));
        },
        error: function (err) {
            alert(JSON.stringify(err));
        }
    });
});
});

我不确定这两个文件是否链接在一起。 如何链接他们

1 个答案:

答案 0 :(得分:0)

在您的server.js文件中,将$('form')替换为$('form #submit')
现在你在表单上调用click event而不是按钮。

检查查看源以查看您的文件是否实际包含在dom中。