通过Ajax表单提交 - POST为空

Question

我正在尝试使用PHP进行Ajax，并且我错过了链中的最后一个链接 - 在提交后获取数据。我尝试使用类型为：POST。

的Ajax请求

我将响应数据打印到控制台，并获得如下所示的字符串：

projectName=Test+Project&type=1&providerName=Test+Provider&completeLink=link1&quotaFullLink=link2&screenoutLink=link3

但是，如果我执行var_dump($_POST);，则返回空。由于我在我的ajax设置中使用type: "POST"，因此我希望使用表单中的数据填充post变量。

表单POST目标本身。

道歉，如果这是对Ajax请求工作方式的真正愚蠢的误解。代码正在运行，但是在代码段中，显示/隐藏表单部分的功能不起作用。

Javascript，CSS，HTML / PHP

＆＃13;

＆＃13;

$(document).ready(function() {

	document.getElementById("typeNew").checked = false;
    
	var request;

	$("#createPanelForm").submit(function(event){

		if (request) {
			request.abort();
		}

		var $form = $(this);

		var $inputs = $form.find("projectName, type, providerName, completeLink, quotaFullLink, screenoutLink, existingProvider");

		var serializedData = $form.serialize();

		$inputs.prop("disabled", true);

		request = $.ajax({
			url: "createpanel.php",
			type: "POST",
			data: serializedData
		});

		request.done(function (response, textStatus, jqXHR){
			console.log(serializedData);
		});

		request.fail(function (jqXHR, textStatus, errorThrown){
		
			console.error(
				"The following error occurred: "+
				textStatus, errorThrown
			);
		});

		request.always(function () {
			$inputs.prop("disabled", false);
		});

		event.preventDefault();
		
		$("#createPanelForm").fadeOut(1000);
		$("#submitResponse").delay(1001).fadeIn(1000);		
	});

})

＆＃13;

body {
	margin-top: 50px; /* 50px is the height of the navbar - change this if the navbarn height changes */
}

.childnav {
	background-color: #d11717;
	text-align: left;
}

.logo-wrapper {
	display: inline-block;
}

.section {
	padding-top: 40px;
	padding-bottom: 10px;
}

.section-heading {
	font-size: 4em;
	margin: 30px 0;
}

.section-lead {
	margin: 30px 0;
}

.section-paragraph {
	margin: 30px 0;
}

footer {
	margin: 50px 0;
}

@media (max-width: 768px) {

.section-heading {
	font-size: 2em;
}

.section {
	padding-top: 25px;
	padding-bottom: 25px;
}
.highlight {
padding: 9px 14px;
margin-bottom: 14px;
background-color: #f7f7f9;
border: 1px solid #e1e1e8;
border-radius: 4px;
}
.delete {
margin-top:5px;
    background:url(../images/delete.png) no-repeat;
    cursor:pointer;
    width: 16px;
    height: 16px;
    border: none;
	display:inline;
}
.back {
margin-top:5px;
    background:url(../images/back.png) no-repeat;
    cursor:pointer;
    width: 16px;
    height: 16px;
    border: none;
	display:inline;
}
.edit {
margin-top:5px;
    background:url(../images/edit.png) no-repeat;
    cursor:pointer;
    width: 16px;
    height: 16px;
    border: none;
	display:inline;
}
.printPage {
margin-top:5px;
    background:url(../images/print.png) no-repeat;
    cursor:pointer;
    width: 16px;
    height: 16px;
    border: none;
	display:inline;
}
.projectComplete {
margin-top:5px;
    background:url(../images/complete.png) no-repeat;
    cursor:pointer;
    width: 16px;
    height: 16px;
    border: none;
	display:inline;
}
.excel {
margin-top:5px;
    background:url(../images/excel.png) no-repeat;
    cursor:pointer;
    width: 16px;
    height: 16px;
    border: none;
	display:inline;
}
.singleShift {
    margin-top:5px;
    background:url(../images/page.png) no-repeat;
    cursor:pointer;
    width: 16px;
    height: 16px;
    border: none;
	display:inline;
}
.search {
    margin-top:5px;
    background:url(../images/search.png) no-repeat;
    cursor:pointer;
    width: 16px;
    height: 16px;
	margin-top:2px;
    border: none;
	display:inline;
}
#query {
margin-top: 10px;
margin-left:auto;
margin-right:auto;
}
.dantable {
background-color: #ffffff;
border: 1px solid #c5251d;
text-align:center;
border-radius:4px;
}
.tweets {
background-color: #ffffff;
border: 1px solid #c5251d;
border-radius:4px;
}
th {
text-align:center;
}
.src_drop{
font-size:11px;
padding:4px 2px;
border:solid 1px #c5251d;
width:160px;
height:28px;
display:inline;
margin-bottom:0px;
border-radius:3px;
}
.src_date{
font-size:11px;
padding:4px 2px;
padding-left: 4px;
border:solid 1px #c5251d;
width:100px;
height:28px;
display:inline;
margin-bottom:0px;
border-radius:3px;
}
.sidewidget {
margin-top:15px;
font-weight:bold;
text-align:center;
margin-bottom: 2px;
}
.page_head {
margin-top:15px;
font-weight:bold;
text-align:center;
margin-bottom: 2px;
border-bottom: 1px solid #c5251d;
}
#pagin {
    opacity:0.5;
	font-size: 12px;
	margin-top: 3px;
}
.col-centered{
float: none;
margin: 0 auto;
}
.center {
margin-left: 0 auto;
margin-right: 0 auto;
}
.bclinks:hover {
color:fff;
}
.testlabel {
font-size: 13px;
}
.dantest {
float:right;
display:inline-block;
}
#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}
.notification {
  margin-top: 15px;
  margin-right: 15px;
  background:#FF0000;
  height: 20px;
  width:22px;
  border-radius:5px;
  color: white;
  /*font-weight: bold; */
  text-align: center;
  /* padding-right:2px; */
}
.notification_link{
  position:absolute; 
  width:100%;
  height:100%;
  top:0;
  left: 0;
  z-index: 1;
}

.notification_img {
border: 1px solid #c5251d;
margin-right: 5px;
}

.notification_msg {
	padding-bottom: 15px;
	border-bottom: 1px solid #D3D3D3;
  	margin-bottom: 15px;
}
.notification_msg_last {

}

.notification_actions {
  	color: #D3D3D3;
}

.notification_actions > a:link {
  	color: #D3D3D3;
}
.btn-notify {
  color: #fff;
  background-color: #f0ad4e;
  border-color: #eea236;
}
.btn-notify :hover,
.btn-notify :focus,
.btn-notify :active,
.btn-notify .active,
.open .dropdown-toggle.btn-notify  {
  color: #fff;
  background-color: #ed9c28;
  border-color: #d58512;
}
.edit_textinput {
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
	outline:none;
	border:none;
	border-style:none;
	height:19px;
	width:100%;
}
#existingProviderInput {
	display:none;
}
#newProviderInput {
	display:none;
}
#submitResponse {
	display:none;
	text-align:center;
	margin-left:-5%;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="row">
            	  
		<?php include("includes/notifications.php"); ?>			
					 

	<div class="col-lg-7 section">
		<div class="highlight">
			<div class="row">
				<div class="col-lg-8 col-centered">
				<!-- Content Container -->
				<div id="createPanel">
					<form id="createPanelForm" class="form-horizontal" role="form" method="post" action="createpanel.php";>
					  <fieldset>
						<p class="page_head" style="margin-bottom:5%">Set up a new project</p>
						<div class="form-group">
						  <label for="projectName" class="col-lg-3 control-label">Project name</label>
						  <div class="col-lg-9">
							<input type="text" class="form-control" name="projectName" id="projectName" placeholder="Enter name of project">
						  </div>
						</div>
						<div class="form-group">
						  <label class="col-lg-3 control-label">Panel type</label>
						  <div class="col-lg-9">
							<div class="radio">
							  <label>
								<input type="radio" onclick="javascript:newOrExisting();" name="type" id="typeNew" value="1" checked="">
								New provider
							  </label>
							</div>
							<div class="radio">
							  <label>
								<input type="radio" onclick="javascript:newOrExisting();" name="type" id="typeExisting" value="2">
								Existing provider
							  </label>
							</div>
						  </div>
						</div>
						<div id="newProviderInput">
							<div class="form-group">
							  <label for="providerName" class="col-lg-3 control-label">Provider name</label>
							  <div class="col-lg-9">
								<input type="text" class="form-control" name="providerName" id="providerName" placeholder="Enter name of company">
							  </div>
							</div>
							<div class="form-group">
							  <label for="completeLink" class="col-lg-3 control-label">Redirect links</label>
							  <div class="col-lg-9">
								<input type="text" class="form-control" name="completeLink" id="completeLink" placeholder="Enter completion link">
								<br />
								<input type="text" class="form-control" name="quotaFullLink" id="quotaFullLink" placeholder="Enter quota full link">
								<br />
								<input type="text" class="form-control" name="screenoutLink" id="screenoutLink" placeholder="Enter screenout link">
							  </div>
							</div>
						</div>
						<div id="existingProviderInput">
							<div class="form-group">
							  <label for="select" class="col-lg-3 control-label">Provider</label>
							  <div class="col-lg-9">
								<select class="form-control" name="existingProvider" id="existingProvider">
								  <option value="" disabled selected>Select an existing provider</option>
								  <option>All Global</option>
								  <option>Cint</option>
								  <option>Barcode</option>
								  <option>Research Now</option>
								  <option>Research Opinions</option>
								</select>
							  </div>
							</div>
						</div>
						<div class="form-group">
						  <div class="col-lg-9 col-lg-offset-3">
						  <br />
							<button type="reset" onclick="clearForm();" class="btn btn-default">Reset</button>
							<button type="submit" class="btn btn-default">Submit</button>
						  </div>
						</div>
						
					  </fieldset>
					</form>
				</div>
				
				<div id="submitResponse">
					<p class="page_head" style="margin-bottom:5%">Form has been submitted</p>
					
					<div id="submitSuccess">
						<p align="center">
							<img style="margin-right:1%" src="images/complete.png"/>
							Success!
						</p>
						<p>
							Display the submitted details here
						</p>
					</div>
					
					<div id="submitError">
						<p align="center">
							<img style="margin-right:1%" src="images/delete.png"/>
							Error!
						</p>
						<p>
							Display details of the error here
						</p>
					</div>			
					
				</div>
				<!-- End of Content Container -->
				</div>
			</div>
		</div>
	</div>
</div>

＆＃13;

＆＃13;

＆＃13;