Question

我想加载包含以下内容的文件“shared.html”：

<ul>
    <li><a href = "index.html">Home</a></li>
    <li><a href = "marks.html">Marks</a></li>
    <li><a href = "averages.html">Averages</a></li>
</ul>

在另一个名为“index.html”的html文件中使用jQuery，但它不起作用。我的“index.html”：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <link href = "project.css" type = "text/css" rel = "stylesheet"/>
    <script type="text/javascript" src = "project.js"></script>
</head>
<body>
    <h1>Home page</h1>
    <div id = "navbar"></div>
</body>

我的javascript文件：

$(document).ready(function() {
    $(function(){
        $("#navbar").load("shared.html"); 
    });
});

Answer 1

方法＃1

$(document).ready(function() {
    $("#navbar").load("shared.html");
});

方法＃2

$(function() {
    $("#navbar").load("shared.html");     
});

Answer 2

var mainApp = angular.module('main-app', [])
    .controller('myController', function ($scope, $http, crudService) {

        crudService.getAllUsers($http, $scope);
        $scope.user = {
            firstName: "",
            lastName: "",
            id: ''
        };

        $scope.AddEditUser = function (user) {
            asssignToScope(user);
            alert($scope.user.firstName + ' ' + $scope.user.lastName + ' ' + $scope.user.id);
            if ($scope.user.id == "") {
                var result = crudService.AddUser($http, $scope, $scope.user);
            } else {
                var result = crudService.UpdateUser($http, $scope, $scope.user);
            }
            resetUser();
            crudService.getAllUsers($http, $scope);
        }

        $scope.DeleteUser = function (user) {
            asssignToScope(user);
            alert($scope.user.firstName + ' ' + $scope.user.lastName + ' ' + $scope.user.id);
            var result = crudService.DeleteUser($http, $scope, $scope.user);
            resetUser();
            crudService.getAllUsers($http, $scope);
        }

        function asssignToScope(user) {
            if (user) {

                $scope.user.id = (!user.id) ? "" : user.id;
                $scope.user.firstName = user.first_name;
                $scope.user.lastName = user.last_name;
            }
        }

        function resetUser() {
            $scope.user = {
                firstName: "",
                lastName: "",
                id: ''
            };
        }

        $scope.ShowAddEditPopUp = function (user) {
            asssignToScope(user);
            $('#myModal').modal('show');
        }
    });
    
    mainApp.service('crudService', function () {
    this.getAllUsers = function ($http, $scope) {
        $http({
            method: "GET",
            url: 'https://reqres.in/api/users'
        }).then(function (response) {
           $scope.allUsers = response.data.data;
        });
    }

    this.AddUser = function ($http, $scope, user) {
        $http({
            method: "POST",
            url: 'https://reqres.in/api/users',
            data: {
                name: user.firstName,
                job: user.lastName
            }
        }).then(function (response) {
            return true;
        });
    }

    this.UpdateUser = function ($http, $scope, user) {
        $http({
            method: "PUT",
            url: 'https://reqres.in/api/users/' + user.id,
            data: {
                name: user.firstName,
                job: user.lastName
            }
        }).then(function (response) {
            return true;
        });
    }

    this.DeleteUser = function ($http, $scope, user) {
        $http({
            method: "DELETE",
            url: 'https://reqres.in/api/users/' + user.id,            
        }).then(function (response) {
            return true;
        });
    }

});

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="Scripts/angular.js"></script>
    <script src="Scripts/jquery.min.js"></script>
    <script src="Scripts/angMaster.js"></script>
    <script src="Scripts/angMod.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
    <script>

    </script>
</head>

<body>

    <div ng-app="main-app" ng-controller="myController">
        <div style="margin: 20px;">
            <table>
                <tr>
                    <td>
                        <input type="text" placeholder="Search User" ng-model="searchText" /></td>
                    <td style="padding: 5px;">
                        <input type="button" name='btnAddUser' class="btn btn-primary" value="Add User" ng-click="ShowAddEditPopUp(user)" />
                        <!--data-target="#myModal" data-toggle="modal"-->
                    </td>
                </tr>
            </table>

            <table border="1" style="width: 600px">
                <thead>
                    <th>ID</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>User Pic</th>
                    <th>Edit</th>
                    <th>Delete</th>
                </thead>
                <tr ng-repeat="user in allUsers | filter:searchText">
                    <td>{{ user.id }}</td>
                    <td>{{ user.first_name }}</td>
                    <td>{{ user.last_name }}</td>
                    <td><img ng-src="{{user.avatar}}" alt="{{ user.first_name }}" style="height:50px; width:50px" /></td>
                    <td><input type="button" value="Edit" ng-click="ShowAddEditPopUp(user)" /></td>
                    <td><input type="button" value="Delete" ng-click="DeleteUser(user)" /></td>
                </tr>
            </table>

        </div>


        <!-- Modal PopUp-->
        <form name="userForm">
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title" id="myModalLabel">User</h4>

                        </div>
                        <div class="modal-body">
                            <table>
                                <tr>
                                    <td>
                                        <span>First Name : </span>
                                        <input type="text" name="firstName" placeholder="First Name" ng-model="user.firstName" required/>
                                        <span style="color:red" ng-show="userForm.firstName.$dirty && userForm.firstName.$invalid">
                                        <span ng-show = "userForm.firstName.$error.required">First Name Name is required.</span>
                                        </span>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="padding: 5px;">
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <span>Last Name : </span>
                                        <input type="text" name="lastName" placeholder="Last Name" ng-model="user.lastName" required />
                                        <span style="color:red" ng-show="userForm.lastName.$dirty && userForm.lastName.$invalid">
                                        <span ng-show = "userForm.lastName.$error.required">Last Name Name is required.</span>
                                        </span>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <div class="modal-footer">
                            <input type="button" class="btn btn-default" data-dismiss="modal" value="Close" />
                            <input type="submit" class="btn btn-primary" ng-disabled="userForm.$invalid" ng-click="AddEditUser()" value="Update" />
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>

</body>

</html>

使用jQuery无法正常加载html文件到另一个html文件

2 个答案: