【发布时间】：2017-07-22 22:16:39
【问题描述】：
我有一个通过 ajax 将用户信息发送到 php 文件的表单，该表单位于引导模式上。我试图添加一个额外的字段以查看它是否更适合该目的，但决定在该字段完美运行之前将其删除。现在 ajax 不会向我的 php 文件发送信息。我在开发者工具中收到“Uncaught TypeError: $.ajax is not a function”的通知。我的代码有错误吗？
表格：
<?php
include_once("php_includes/check_login_status.php");
include_once("php_parsers/functions.php");
?>
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=gb18030">
<title> <?php echo $u; ?></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" crossorigin="anonymous">
<link href="toolkit.css" rel="stylesheet">
<link href="home.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<script src="js/main.js"></script>
<script src="js/ajax.js"></script>
<script src="js/profile_edit.js"></script>
<script src="js/join.js"></script>
</head>
<body>
<div class="panel-body">
<h5 class="m-t-0">About <?php
if ($isOwner == "yes"){
echo '<small><a href="#" class="editlink" data-toggle="modal" data-target="#participantModal">Edit</a></small>';
} ?></h5>
<ul class="list-unstyled list-spaced">
<li id="city" class="datainfo">City: <a href="#">
<?php
if($city == ""){
echo "Needs to be updated";
} else {
echo "$city";}
?>
</a>
<li id="state" class="datainfo">State: <a href="#">
<?php
if($state == ""){
echo "Needs to be updated";
} else {
echo "$state";}
?>
</a>
<li id="FavoriteSport" class="datainfo">Favorite Sport: <a href="#">
<?php
if($favoriteSport == ""){
$favoriteSport = "Needs to be updated";
}
echo $favoriteSport;
?>
</a>
<li id="participation" class="datainfo">Has participated in sport above: <a href="#">
<?php
if($participation == ""){
$participation = "Needs to be updated";
}
echo $participation;
?>
</a>
</ul>
</div>
</div>
<?php include_once("template_pageBottom.php"); ?>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<!-- Modal -->
<div class="modal fade" id="participantModal" tabindex="-1" role="dialog" aria-labelledby="participantModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="participantModalLabel">Updating About</h4>
</div>
<div class="modal-body">
<form id="aboutForm">
<div class="form-group">
<label for="updatedCity">City:</label>
<input type="text" class="form-control" id="updatedCity" aria-describedby="updatedCity" placeholder="<?php if($city == ""){
$city = "What city are you in?";
} echo $city;?>">
</div>
<div class="form-group">
<label for="updatedState">State:</label>
<input type="text" class="form-control" id="updatedState" placeholder="<?php if($state == ""){
$state = "What state are you in?";
} echo $state;?>">
</div>
<div class="form-group">
<label for="sportSelect">Which sport do you like?</label>
<select class="form-control" id="sportSelect">
<option value="">Select sport</option>
<option value="Basketball">Basketball</option>
<option value="Baseball">Baseball</option>
</select>
</div>
<div class="form-group">
<label for="playedSelect">Have you played this sport before?</label>
<select class="form-control" id="playedSelect">
<option value="">Select participation status</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
<input type="hidden" class="form-control" id="usernameSubmitting" value="<?php echo $u; ?>">
<div class="alert alert-success" id="successAlert" role="alert" style="display: none"></div>
<div class="alert alert-danger" id="updateFail" style="display:none" ></div>
<div class="alert alert-warning" id="warningAlert" role="alert" style="display: none"></div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" onClick="about()">Save changes</button>
</div>
</div>
</div>
AJAX：
function about(){
var updatedCity = $("#updatedCity").val();
var updatedState = $("#updatedState").val();
var x = document.getElementById("playedSelect");
var playedSelect = x.options[x.selectedIndex].value;
var p = document.getElementById("sportSelect");
var sportSelect = p.options[p.selectedIndex].value;
var usernameSubmitting = $("#usernameSubmitting").val();
var aboutForm = document.getElementById("aboutForm");
$.ajax({
url: "../php_parsers/updateabout_parse.php",
type: "POST",
data: {
updatedCity: $("#updatedCity").val(),
updatedState: $("#updatedState").val(),
sportSelect: $("#sportSelect").val(),
playedSelect: $("#playedSelect").val(),
usernameSubmitting: $("#usernameSubmitting").val()
}
}).done(function(result) {
if (result == "success") {
$("#successAlert").html("Update successful").show();
} else {
$("#updateFail").html(result).show();
}
})
$('#participantModal').on('hide.bs.modal', function (e) {
if(updatedCity != ""){
$("#city").html('City: <a href="#"> ' + updatedCity + '</a>');
}
if(updatedState != ""){
$("#state").html('State: <a href="#"> ' + updatedState + '</a>');
}
if(playedSelect != ""){
$("#participation").html('Has participated in sport above: <a href="#"> ' + playedSelect + '</a>');
}
if(sportSelect != ""){
$("#FavoriteSport").html('Favorite Sport: <a href="#"> ' + sportSelect + '</a>');
}
$("#successAlert, #updateFail, #warningAlert").hide();
aboutForm.reset();
});
}
PHP：
<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
include_once("../php_includes/db_conx.php");
$city = "";
$error = "";
$u = "";
$state = "";
$sportSelect = "";
$playedSelect = "";
$u = mysqli_real_escape_string($db_conx, $_POST['usernameSubmitting']);
if(!$_POST['updatedCity'] && !$_POST['updatedState'] && !$_POST['sportSelect'] && !$_POST['playedSelect']){
$error .= "No information was entered";
echo $error;
}else{
echo "success";
}
?>
【问题讨论】：
-
您正在将 jQuery-slim 加载到 jQuery 之上，从而删除了
$.ajax。不要那样做 -
没有 jQuery-slim 我的模态在启动时立即隐藏是否有替代方法？
-
-
对于任何寻找并感谢菲尔的人
标签： javascript php jquery ajax twitter-bootstrap