AJAX returns HTML with the response
Question
I have this Javascript on my html page:
$('#om-dropdown').change(function () {
var id = $(this).val();
var data = {
"OM": id
}
data = $(this).serialize() + "&" + $.param(data);
alert(data);
$.ajax({
type:'POST',
dataType: "json",
data: data,
error: function (xhr, status, error) {
console.log(arguments);
console.warn(xhr.responseText);
alert(" Can't do because: " + error);
},
success:function(data){
alert("Form submitted successfully.\nReturned json: " + data["forca_armada"]);
}
});
return false;
});
and this is part of the php code on the same page:
if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest' &&
isset($_POST["OM"]) && !empty($_POST["OM"])){
$OMid = $_POST["OM"];
$selectedOM = $mapper->getOMbyId($OMid);
if ($selectedOM != null){
send_OM_info($selectedOM);
}
}
function send_OM_info($OM){
$return = $_POST;
$return["forca_armada"] = $OM->getForcaArmada();
$return["json"] = json_encode($return);
echo json_encode($return);
exit();
}
My problem is that AJAX should only return the encrypted ids of OM's, but it is returning that plus the html page bellow the echo json_encode($return); even though there is a exit() right after the echo. What seems to be the problem here?
Here is the AJAX response:
string(56) "F3eDjfjuAG839xXzRTi2bwdug5cCRlJkk/ud7JhCfuD/Tnh8WhaZunme"
string(56) "pwX1NNJRjxjGauOqX4ulcH7z7VXIhrj4yOQ4v+Dj3tSioRdgDKM2L+E5"
string(56) "lCy65DD8dc0hArq0dQjyCGuzhAXgWyhaTp1rXEKyFRry1SPmhmvnwW8U"
string(56) "PZbjG+gS7cUdI48TktBjFbF4EbW4p8VaXSS9baz2UECVpDZCiigRxukj"
string(56) "s8LTTwsLdRSSD563iVy0WJ36Gl8FSMiz1Pfmt/SepLK5FJxOW2gau1C2"
string(56) "og846u5NieO60ODIS1OZVHRwSV4I96Z7XFELWLsAnj3F212Kdj0rKNwo"
string(56) "7SoGN49esOOx4Xu2Y7K7Y2GqlMcHOmEqvmqcIsrcQwPPEaFwdDzMbwl+"
string(56) "YAQOOoosX+huRLqETESh1mBMR34ybqLXlrsB1F44/SkS4k3QUHsEzMtn"
string(56) "zYECSR3S/7j2KdNB8kZFPYnvgAWaWUzy+yn0bZA58r0wIc1wMzh7YgTT"
string(56) "82MUCiVlyHL/N+zeacX2n8BWrKkr12F5DIfPFRqL3qLes+h7MRskTC4Q"
string(56) "1PQkUOK2efsxfu1bWiFDBW2Nqi2pshTx/0WJdLWP+8X2fx5G7QCkecAl"
string(56) "kepEICm3oUs5lbkyVoehyOJ08pOifngFsAnBk9umaBbHGu/Ha03gwHm5"
string(56) "5284bA2tu/XdTzNR1VLp9B6VIl4wJugVZ2URc+PQRZ6N4sAZGGCxPyMC"
string(56) "IT0i+qEu6NnuGq7k2v6IWqGffrGDuOYybvn5M1HRfnhe82oel6kDziqf"
string(56) "bZMn9PprUzQze8sPOH6GPdi0rWTixBGzKzlpR21wmjtJkY+I80TUaIyS"
string(56) "f/R3VN7FW8bbVxAhwK/Bq90y6z+TPbuvk/2ac1myUoUAvBUcLHSUVtU5"
string(56) "P0lQYa/T4KvSS6qAZuCHRhdRuTxDHpDZR9dTRSBCSyJPfjqmK6GkasnF"
string(56) "96eNtObNpZJCPxXL6+0s1nvU3WCIXpRbDkX6vwvUuM9+rs0W7rQRJJEB"
string(56) "xuKiaIbZpdm9i9GM36ladDe9SZIdnJl9CqsygIkwoquYHk8gduKm1kc0"
string(56) "E0nxA9iR5UTb97KJ7I5JboQMqSoHtO2/qqal7C0Ge03xWz7MwIzvvFoZ"
string(56) "AAMERYBjfuw0F2MXL19eSvygGRdbWOBuoXnYhJLRjSMxkf3pGkq/RhNa"
string(56) "nwurra6BqM83UNdCGF11QqfJx7Xf+EnYB8Q4UmKfK1Jh5/BMl/sYov9W"
string(56) "AaO7PwNcrE+OP0Hoe+IK46G8hloAhx3J9jcQaB3MfA681+1+Tpyc7+1H"
string(56) "K8kqJo+6Sp2+kJsqGIEXxNEK6SrUA0CMkvIF7b5tQ3BeYVbIQalVD9Yb"
string(56) "9Ta7JqffN7AqZhI2sQbq9SMCGSxYecKG2E7KWXUS6t5zXM3Sk6+NkWPn"
string(56) "TEB9yE/0nsYSib8lMEFwXkDqdUbv1NtD78IOq3HHqEYbKAnJx5gi2hGF"
string(56) "JjiBsOtUOTmXTDe/tF3HFOH47uME0NdjAP1j2ZRjIv617do7OBNcuUbg"
string(56) "Ms+nQdNVY+AfWU8Z2Vq5JdZSXdRudYK2taM1r0yBkOO09lEDUIiIs7Nq"
string(56) "4vwcDGoIaU0br7Ec88fLCm2rKQmLO6VfK3zVSLITP295Dt9hkmU4dLVY"
string(56) "huyw8HRt4Mf+JVu5dffoGHIDzNgRVee0oQcMzu7NDuwu2GcVNrEcH1nC"
string(56) "BZN7Vu18kW9lNtcsryHujR4X5iqaS3fyPj+TWjoFMHOtEkEjJdULz7cq"
string(56) "sIjI35mTP0hwAHOT0x5j1epq8N2Vo9IfOQ7xLSYlcVRTzplfhzTCqqzt"
string(56) "YhcmhdPKAc+OWd/rBog/5cHubx9lSEnq2PM7+I+py8vzmYvXkqTwEq78"
string(56) "ZbeA8B1dxrVvR2caYTq5CzwJm2VWWS/PKZwFuw6FNlK2M0MdXFzEgg0q"
string(56) "HTMr3tvDwFRvm2+x1T52gHG8DIW4ObOJekuccaUocx2JrejNy+sESGmG"
string(56) "BbCh9NgwY1InmhHkf6ofuPxG6+h6vBo5m96GxSe/JMNP8jrcEEBZHz4V"
string(56) "uXkvt/jbOKezAxPOKoCzmsuizUriZOJQhYphvjRj2LPTppD56+ZyMiUn"
string(56) "SsO1ZDK3N49Q97G7RhudqwfccOPGTnN3TvFbz+3JS87BmqHeRzUT7rMN"
string(56) "vn/zNey4IIhVtg0+v29TOe0dNskyAzN2ELeyZnrFGYrS1E8QbCPhNFdJ"
string(56) "zwkqGuRgZK2k41QJjVRtwqoYyy9GJ3/yvYAaCm683LbwzUXoLYM9hzvU"
string(56) "kx3p3CON84hG/ywh/lQbWdckEqecazrT01dWPgSf9uDkq94wOqiuni5e"
string(56) "dgEKDUoKJfyml+6ghOSMMNxQuKl2VhkuqGQP+XaDqnn6KnFtdgJQa+ci"
string(56) "OF0XgLxSQsXox4mfW+vCnnYB46FNeDaj34ggNnFKKnO4qtFMwv8pB7JH"
string(56) "exKalsI4MQvfVUaobN6sNLJgDg0R+a7tTTA7i8iKOFia3YYR1r4yI4Uu"
string(56) "K5FVoqfFO3jJN1idZyZMNda+efS36b5GcqzcOP/EsBSaY4ZYmJp8gWlk"
string(56) "kFxc1MViaaJz0j8X62HqI7RNZjyh05dgEWGQgKNHVQIbCxMUhG/3b4QR"
string(60) "dYRfWF1jft88BkmY36MH3LrNjd3LdmFzmNT+0fGIDIY3YeagFxJTMR9ZgA=="
string(60) "vJCa7WyQUYlDvPNgn1QD4K1z7fTgI1/liv7mG7aRRVGI6M62W9EDV/fRrA=="
string(60) "1FijGeGIosb6gVtDg2CC9BNBOnYDyC4RzSsSsMBd8kcsN/ImB9cimpWanw=="
string(60) "vwgS9yzlPJ3S4MFEto8WU5vPWZb3mGq7/hvkc4I3RIuLv1oV+7qqMpYXeA=="
string(60) "m1MkQAcSzlTuj09cRk0TfNKupuBfN+qKYvAUuOk4bV/6F3ZmuCO1RLNnZw=="
string(60) "qwlfv7RgNRKHG/ysLVTtOKtRBs4Z8/4FF0DsEf3Q3VrH7LWXpdThW4rb4Q=="
string(60) "k9CpO6DSXDqX5WNeUNksOPJK7WnCtSEopMTmj5Dq3lUXo7zh5V15J2gJtQ=="
string(60) "VcOVgoP7YwxBPIVqfT8Ql3mAE+6wfeI3CzG0hSRv1xeHRE9duHCo8NZC9g=="
string(60) "5UGg10a+WmzOmjeb2HFUSaun3QARDZdcfwdlwxNKQ+4fE1KXQvu/I3djgA=="
string(60) "fVXwPP+71goZog/D/oHHm3GssL120/ug4k987xNb1Sj21b6yoLihVgVPTw=="
string(60) "Mb7g7dhN9tKrDBaq8WdCPH1SwApELEFrwA6y0094dFIevx6q443THkXmQw=="
string(60) "TkJh980/kk8VQA3QlpSWY4ff+UkSMaxpUJ8U6mS9bGhsufB15PK3vgNQWw=="
string(60) "H2oJnlqY/4Izgo6xBhhHYlxH3Q87Fn/5t+ymVh+H6n2O7ArvDIY6iD53sA=="
string(60) "E0UpgB+q3Qf9TxvHsCVJ0MT016DVauZ14/AlduYz/PZy6qCsLsCHJcpWJw=="
string(60) "RMzRMP2PkpGiiYFRgII7aZdNgZRhXkGIvrb2YhZLBddNZmXvNGWf7bLsdw=="
string(60) "uf5+fLek+geVpbPbn2D9AnrEYopyRUkVTT2+W7hMl+Mv8GisPsznQ20X+Q=="
string(60) "xxu3/1hpi/irs7D4Eq/NBsHmVdBLm3p2kxn/wo/6+GQz1sY53u2EUvQ3zA=="
string(60) "KeG9Kkm254B09xLwPjs19Emu5ZkazPEC3WWN78F5769idZqlfT5IIXyxPw=="
string(60) "nuOobIIzqI8BvUZIwQ2nsOdJqQmqSMuDD9Edy56qSlYLcHLofDO923TuIA=="
string(60) "ydrFoEayM8czV6vZgDEtGVJ88KzNZM8vrnVe4O7zlCLTB3VLvpk4Po21mw=="
string(60) "HBuSpchkmCDG9e/SWKLNLPgRYf4+yRtqbH0tlD26AcQsNxzpHCSECr4S0Q=="
string(60) "wAJMDkKC9YhPI7DZ9c0KS5PjN/dfeUQ1d4XRqnzWhF362mVCpPZdR9Hi4w=="
string(60) "KAkWQbrf62smiaTBjInfmDEN3GaijvUx/+85WgLNAYy0w2lAq5RQSHhgBA=="
string(60) "AsfJfANYdRz7fcr337jVScJT8w23LdYYpscRskIGdOIwJq54IGtpoqwAUw=="
string(60) "I5Fp9nXnJcguORGJYu0SRzvy6hhjHIfYBYp0UMvoHEellOa8ULP5PYlF8w=="
string(60) "DdTYPpdbZP25VIBaMdensnPbAVj0QJBC28oCmcu6yQJCHE/FGyfmCuRNXw=="
string(60) "5Wccas1zozFCLokNuI+Bm73/jLhP2mMwQSlJownXxWuNao1bX6NM8/OFaw=="
string(60) "tnfpnsTqpPxswZrWdbG7OifIYVto+/9QVbJoVmcVYdKoDNrzzd2WwJZbDA=="
string(60) "GUt0muEAIflw6hydKNbvf9+Uy43Bjf4JjE7OgTx1DBAjA3Roo7X04GYCQQ=="
string(60) "ka2HI/bGMULLu3EOmkXLMGcVg+DVIcdlZSMJF+rlgJOxmy3Uszku5atAhw=="
string(60) "uj3VF17pqJO2JnWTxPTeSR2T4G8xlujkqLqOnuEy/xLYwy5uhpo7eRW10g=="
string(60) "Bf+xJjhfkvlBhAVG3f+qIna2xUoN390JtWE9SJ4dOXOZnuWdl35c+0pI2A=="
string(60) "JADFWar/NnhLP2OS7GkMPRoptcnZwGlZKwvpbRQMAEEio95HZyL+A1rL4A=="
string(60) "yE9uYzFYBYnrYnaQjqkBWjMvD5F06CYN2bWpaQyuCyEDaE2pGH7QOcQqvg=="
string(60) "9KYVn4fhi+dRVqKyHZEhtYuLkRbF3VsmUBnZcavrnGAa9h0Cco7UJ7bruw=="
string(60) "l+xlGBYotnb358d58nS1WJvfKHyd63N7cV0xCtRnVUEUkYwaZLhkTH6+GQ=="
string(60) "Q24CdAbJSo7TJP4ZsbDggmb9Grh0QWroTyOYhP28lTRK4cuu5tBwX7DKvw=="
string(60) "ruTlrgUuuXyFbflXkxIQGr4wpfxXC27nXVyebo9f1wI5Mvn5zUUz8TUbrw=="
string(60) "MpF08Tj9LDt3j6iCEXmmB/+YVAmwWhEoQLwUQuqXnDTxb7z89TyGbb4V/g=="
string(60) "atq6/tQefw7Xm3X+ZuyTJr9q5OFRq0EreFJOtVbRvKuRGN3wGebuZXGQ0g=="
string(60) "A9H5uFKsAlnLYI9TIga/y0f1Ooh1T3HLH7+sJwVVW2xhAwL3qlwNQAQnkg=="
string(60) "kwY+LoDGVaEpj8N4Jq/O1uSb9HNo89oG9gSRGF+FtLGzgsk12sUv6x85lw=="
string(60) "jsYzzkfd6K5ksGSm3hR9XtxZjrUnjMwmAFYaAw3KQCxUljl8rxNI4EYZbA=="
string(60) "WM2MS70lCT34b+fecJrbDzNXozUi0mO/1/Z6BfPYz72jAMnZ3cFAhGPr2g=="
string(60) "+89j66U5ciGQo0aZM0/+P9nuPcdzmRrAFLX/xr7k3G/APm976bN6MRWZiQ=="
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ASC | Principal</title>
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../font-awesome/css/font-awesome.css" rel="stylesheet">
<link href="../css/animate.css" rel="stylesheet">
<link href="../css/style.css" rel="stylesheet">
<link rel="apple-touch-icon" sizes="180x180" href="../images/favicon_package_v0.16/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="../images/favicon_package_v0.16/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="../images/favicon_package_v0.16/favicon-16x16.png">
<link rel="manifest" href="../images/favicon_package_v0.16/site.webmanifest">
<link rel="mask-icon" href="../images/favicon_package_v0.16/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
</head>
<body class="top-navigation">
<div id="wrapper">
<div id="page-wrapper" class="gray-bg">
<div class="row border-bottom white-bg">
<nav class="navbar navbar-expand-lg navbar-static-top" role="navigation">
<a href="#" class="navbar-brand">STM</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-reorder"></i>
</button>
<!--</div>-->
<div class="navbar-collapse collapse" id="navbar">
<ul class="nav navbar-nav mr-auto">
<li class="dropdown">
<a aria-expanded="false" role="button" href="#" class="dropdown-toggle" data-toggle="dropdown">Consulta</a>
<ul role="menu" class="dropdown-menu">
<li><a href="">Conselho Permanente</a></li>
<li><a href="">Conselho Especial</a></li>
</ul>
</li>
<li class="dropdown">
<a aria-expanded="false" role="button" href="#" class="dropdown-toggle" data-toggle="dropdown">Novo Conselho</a>
<ul role="menu" class="dropdown-menu">
<li><a href="">Conselho Permanente</a></li>
<li><a href="">Conselho Especial</a></li>
</ul>
</li>
<li>
<div class="vl"></div>
</li>
<li class="dropdown">
<a aria-expanded="false" role="button" href="#" class="dropdown-toggle" data-toggle="dropdown">Cadastro</a>
<ul role="menu" class="dropdown-menu">
<li><a href="cadastro-militar.php">Militar</a></li>
<li><a href="">Posto</a></li>
<li><a href="">Organização Militar</a></li>
<li><a href="">Força Armada</a></li>
</ul>
</li>
<li>
<a aria-expanded="false" role="button" href="#" class="not-active" >Relatórios</a>
</li>
<li>
<a aria-expanded="false" role="button" href="#" class="not-active" >Sorteio</a>
</li>
</ul>
<ul class="nav navbar-top-links navbar-right">
<li>
<a href="logout.php">
<i class="fa fa-sign-out"></i> Sair
</a>
</li>
</ul>
</div>
</nav>
</div> <div class="row wrapper border-bottom white-bg page-heading">
<div class="col-lg-10">
<h2>Cadastro Militar</h2>
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="../index.php">Principal</a>
</li>
<li class="breadcrumb-item">
<a>Cadastro</a>
</li>
<li class="breadcrumb-item active">
<strong>Militar</strong>
</li>
</ol>
</div>
<div class="col-lg-2">
</div>
</div>
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<div class="col-lg-12">
<div class="ibox ">
<div class="ibox-title">
<h5>Entre com as informações do militar</h5>
</div>
<div class="ibox-content">
<form method="post">
<div class="form-group row"><label class="col-sm-2 col-form-label">CPF</label>
<div class="col-sm-10"><input name="cpf" type="text" class="form-control"></div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group row"><label class="col-sm-2 col-form-label">Nome</label>
<div class="col-sm-10"><input name="fname" type="text" class="form-control"></div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group row"><label class="col-sm-2 col-form-label">Sobrenome</label>
<div class="col-sm-10"><input name="lname" type="text" class="form-control"></div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group row"><label class="col-sm-2 col-form-label">Organização Militar</label>
<div class="col-sm-10">
<select id="om-dropdown" class="form-control m-b" name="account">
<option></option>
#Long list of <option> here </select>
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group row"><label class="col-sm-2 col-form-label">Posto</label>
<div class="col-sm-10">
<select class="form-control m-b" name="account">
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
<option>option 4</option>
</select>
</div>
</div>
<div class="the-return">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div>
<strong>Copyright</strong> Example Company © 2014-2018
</div>
</div>
</div>
</div>
<!-- Mainly scripts -->
<script src="../js/jquery-3.1.1.min.js"></script>
<script src="../js/popper.min.js"></script>
<script src="../js/bootstrap.js"></script>
<script>
$('#om-dropdown').change(function () {
var id = $(this).val();
var data = {
"OM": id
}
data = $(this).serialize() + "&" + $.param(data);
alert(data);
$.ajax({
type:'POST',
dataType: "json",
data: data,
error: function (xhr, status, error) {
console.log(arguments);
console.warn(xhr.responseText);
alert(" Can't do because: " + error);
},
success:function(data){
// $(".the-return").html(
// "Posto: " + data["posto"] + "<br />JSON: " + data["json"]
// );
alert("Form submitted successfully.\nReturned json: " + data["forca_armada"]);
}
});
return false;
});
</script>
</body>
</html>
error @ cadastro-militar.php:179
i @ jquery-3.1.1.min.js:2
fireWith @ jquery-3.1.1.min.js:2
A @ jquery-3.1.1.min.js:4
(anonymous) @ jquery-3.1.1.min.js:4
load (async)
send @ jquery-3.1.1.min.js:4
ajax @ jquery-3.1.1.min.js:4
(anonymous) @ cadastro-militar.php:173
dispatch @ jquery-3.1.1.min.js:3
q.handle @ jquery-3.1.1.min.js:3
ListPicker._handleMouseUp
The first console alert I get is indeed the encrypted id of the selected list element, but the second alert states:
Can't do because: SyntaxError: Unexpected token s in JSON at position 0
EDIT 1
Here is the beggining of the complete file:
<?php
session_start();
include("../controller/loginFuncs.php");
\asc\checkLogin();
require_once '../controller/database/PDO_Conn.php';
require_once '../controller/database/MySQL_DataMapper.php';
try {
$pdo = \asc\PDO_Conn::getInstance();
$mapper = new \asc\MySQL_DataMapper($pdo);
$result = $mapper->fetchAllOMs();
} catch (\Exception $e) {
echo $e->getMessage(), "\n";
}
function send_OM_info($OM){
$return = $_POST;
$return["forca_armada"] = $OM->getForcaArmada();
$return["json"] = json_encode($return);
echo json_encode($return);
}
if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest' &&
isset($_POST["OM"]) && !empty($_POST["OM"])){
$OMid = $_POST["OM"];
$selectedOM = $mapper->getOMbyId($OMid);
if ($selectedOM != null){
send_OM_info($selectedOM);
}
exit();
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ASC | Principal</title>
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../font-awesome/css/font-awesome.css" rel="stylesheet">
# The rest os the HTML page and the JQuery script is at the bottom
1 answers
solution1
0 2018-08-01 16:19:03
You could enclose the source of your HTML page in a else block.
function send_OM_info($OM){
$return = $_POST;
$return["forca_armada"] = $OM->getForcaArmada();
$return["json"] = json_encode($return);
echo json_encode($return);
}
if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest' &&
isset($_POST["OM"]) && !empty($_POST["OM"])){
$OMid = $_POST["OM"];
$selectedOM = $mapper->getOMbyId($OMid);
if ($selectedOM != null){
send_OM_info($selectedOM);
}
} else { ?>
<!-- YOUR HTML CODE HERE -->
<?php } ?>
However, you should also consider moving your AJAX handling elsewhere, where it can be decoupled from your HTML (View) code.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
AJAX response returns html content
Phalcon Ajax Response Returns HTML
Woocommerce wc-ajax returns html response
AJAX returns response but does not attach the HTML code from response to div
Ajax response returns wrong response
Loading HTML in the Ajax Response
HTML page as AJAX response?
Displaying AJAX response in html
Returning html as ajax response
Ajax Response as HTML
Related Tags