现在我遇到了这个问题，实际上我不知道为什么，这是我第一次遇到这个问题。
我给你解释一下
- 我有 ajax 请求。
- 此 ajax 请求的响应将显示在一个 div 中。
- 响应是一个包含 html、php、js 的页面。
- 脚本正在运行，但脚本标记以文本形式返回。
好的，让我向您解释一下这个问题。
The response has
<script>but when i called the ajax request the<script>shown in the result as text !!!
让我给你看我的代码
AJAX 请求
$.ajax({
url: getBaseUrl() + 'Pages/book_room',
async: false,
data: {offerKey: offerKey, roomType: roomType, hotel: hotel, address: address, stars: stars, checkIn: checkIn, checkOut: checkOut, people: people, image: image, price: price, currency: currency, roomCount: roomCount},
type: 'post',
dataType: 'html',
beforeSend: function() {
$('#' + offerKey).show('slow');
},
success: function(data) {
console.log(data);
$('#' + offerKey).hide('slow', function() {
$.parseHTML(data, document, true);
$(this).html(data);
});
},
complete: function() {
$('#' + offerKey).show('slow');
}
});
结果
更新 AJAX 目标内容
<section id="content" style="background: #fff;">
<div class="container" style="width: 100%;">
<div class="row">
<div id="main" class="col-xs-12 col-sm-12 col-md-12">
<div class="booking-section travelo-box">
<div class="stepwizard col-md-offset-3">
<div class="stepwizard-row setup-panel">
<div class="stepwizard-step">
<a href="#step-1" type="button" class="btn btn-primary btn-circle">1</a>
<p>Personal Information</p>
</div>
<div class="stepwizard-step">
<a href="#step-2" type="button" class="btn btn-default btn-circle" disabled="disabled">2</a>
<p>Payment Option</p>
</div>
<div class="stepwizard-step">
<a href="#step-3" type="button" class="btn btn-default btn-circle" disabled="disabled">3</a>
<p>Confimation</p>
</div>
</div>
</div>
<form id="room_book" class="booking-form" method="POST">
<div class="row setup-content" id="step-1">
<div class="person-information">
<h2>Your Personal Information</h2>
<div class="form-group row">
<div class="col-sm-6 col-md-4">
<label>first name</label>
<?php
$attr = array(
'type' => "text",
'class' => "input-text full-width",
'value' => set_value('first_name'),
'name' => 'first_name',
'id' => 'first_name'
);
echo form_input($attr);
?>
</div>
<div class="col-sm-6 col-md-4">
<label>last name</label>
<?php
$attr = array(
'type' => "text",
'class' => "input-text full-width",
'value' => set_value('last_name'),
'name' => 'last_name',
'id' => 'last_name'
);
echo form_input($attr);
?>
</div>
<div class="col-sm-6 col-md-4">
<label>email address</label>
<?php
$attr = array(
'type' => "email",
'class' => "input-text full-width",
'value' => set_value('email'),
'name' => 'email',
'id' => 'email'
);
echo form_input($attr);
?>
</div>
</div>
<div class="form-group row">
<div class="col-sm-6 col-md-4">
<label>Verify E-mail Address</label>
<?php
$attr = array(
'type' => "email",
'class' => "input-text full-width",
'value' => set_value('confirm_email'),
'name' => 'confirm_email',
'id' => 'confirm_email'
);
echo form_input($attr);
?>
</div>
<div class="col-sm-6 col-md-4">
<label>Nationality</label>
<div class="selector">
<input type="text" class="input-text full-width typeahead" id="autocomplete" placeholder="" />
<input type="hidden" id="locationId" name="locationId" />
</div>
</div>
<div class="col-sm-6 col-md-4">
<label>Phone number</label>
<?php
$attr = array(
'type' => "text",
'class' => "input-text full-width",
'value' => set_value('phone'),
'name' => 'phone',
'id' => 'phone'
);
echo form_input($attr);
?>
</div>
</div>
<div class="form-group row">
<div class="col-sm-6 col-md-4">
<label>Date of Birth</label>
<input type="date" name="date_of_birth" id="date_of_birth" class="input-text full-width" placeholder="yyyy-mm-dd" style="vertical-align: middle;" />
</div>
<div class="col-sm-6 col-md-4">
<label>Prefix</label>
<select name="gender" id="gender" class="input-text full-width">
<option>
Select Prefix
</option>
<option value="Mr">
Mr
</option>
<option value="Ms">
Ms
</option>
<option value="Mrs">
Mrs
</option>
</select>
</div>
<div class="col-sm-6 col-md-4">
<label>Tourest Type</label>
<select name="type" id="type" class="input-text full-width">
<option>
Select Tourest type
</option>
<option value="adult">
Adult
</option>
<option value="child">
Children
</option>
</select>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<label>
<?php echo form_checkbox(array('name' => 'offersEmail'), 1, ($this->input->post('offersEmail') ? 1 : 0)); ?>I want to receive <span class="skin-color">Travel Lights</span> promotional offers in the future
</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<label>
<?php echo form_checkbox(array('name' => 'agreement'), 1, ($this->input->post('offersEmail') ? 1 : 0)); ?> By continuing, you agree to the <a href="#"><span class="skin-color">Terms and Conditions</span></a>.
</label>
</div>
</div>
</div>
<div style="color: red; padding: 15px;">
<?php echo validation_errors(); ?>
</div>
<hr />
<div class="form-group row">
<button class="btn btn-primary nextBtn pull-right" style="margin-right: 2%;">Next</button>
</div>
</div>
<div class="row setup-content" id="step-2">
<div class="col-xs-12">
<div class="col-md-12">
<h2>Payment Method</h2>
<?php
foreach ($payment->param->paymentMethod as $method) {
?>
<div class="form-group">
<?php echo $method->description; ?>
<label class="control-label title" style="text-transform: none;">
<div style="margin: 0 15px;"><input type="radio" name="paymentMethod" value="<?php echo $method->id; ?>" /> <?php echo $method->name; ?></div>
</label>
</div>
<?php
}
?>
<div class="form-group">
<label class="control-label">Company Address</label>
<input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Address" />
</div>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button>
</div>
</div>
</div>
<div class="row setup-content" id="step-3">
<div class="col-xs-6 col-md-offset-3">
<div class="col-md-12">
<h3> Step 3</h3>
<button class="btn btn-success btn-lg pull-right" type="submit">Submit</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
<script>
$(document).ready(function() {
var locationId;
var locationName;
$('.typeahead').typeahead({
source: function(query, proccess) {
$.ajax({
url: getBaseUrl() + 'Pages/get_countries',
data: {poi: query, order: 'POPULARITY'},
type: 'post',
dataType: 'json',
success: function(data) {
proccess(data);
}
});
},
minLength: 3,
updater: function(item) {
$('#locationId').val(item.id);
return item.name;
}
});
var navListItems = $('div.setup-panel div a'),
allWells = $('.setup-content'),
allNextBtn = $('.nextBtn');
allWells.hide();
navListItems.click(function(e) {
e.preventDefault();
var $target = $($(this).attr('href')),
$item = $(this);
if (!$item.hasClass('disabled')) {
navListItems.removeClass('btn-primary').addClass('btn-default');
$item.addClass('btn-primary');
allWells.hide();
$target.show();
$target.find('input:eq(0)').focus();
}
});
allNextBtn.click(function() {
var curStep = $(this).closest(".setup-content"),
curStepBtn = curStep.attr("id"),
nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
curInputs = curStep.find("input[type='text'],input[type='url']"),
isValid = true;
$(".form-group").removeClass("has-error");
for (var i = 0; i < curInputs.length; i++) {
if (!curInputs[i].validity.valid) {
isValid = false;
$(curInputs[i]).closest(".form-group").addClass("has-error");
}
}
if (isValid) nextStepWizard.removeAttr('disabled').trigger('click');
});
$('div.setup-panel div a.btn-primary').trigger('click');
});
</script>
更新#2
顺便说一句，向导的脚本在这个 scrip 标签中，它工作正常。
最佳答案
默认情况下，<script>标签应该有 display: none使用用户代理样式表:
我坚信如果您检查该元素，您会发现在我上面显示的计算样式 中，它将继承display。风格不知何故。这就是原因。
找到类似的东西:
.divClass * {display: block;}
因为，没有人瞄准 <script>标签! :P
关于javascript - <script> 标签显示在 ajax 响应中并执行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38679347/