使用 JavaScript PHP jQuery 从网页发布数据到 Google Sheet
Posting data from webpage using JavaScript PHP jQuery to Google Sheet
在你说这是重复之前，请听我说完。我遵循了这个答案 (jQuery Ajax POST example with PHP)，但我正在尝试将数据发送到 Google Sheet。我已经让代码在 Google Sheet 上运行，因为我可以通过 运行 我的代码直接从 sheet.
添加数据。
但是，让它与我的网页一起使用显然是问题所在。尽管我已经遵循了我上面发布的问题的答案，但我认为这里还有更多的东西在起作用，这与我在这方面缺乏工作经验有关。
下面的代码是浮动页脚，包含在整个网页的代码中（其中 jquery-1.11.0.min.js 和 jquery-migrate-1.2.1.min.js 已经被调用了）。当我点击提交按钮时，页面看起来像是在处理请求，但 Google Sheet、Sheet1 (https://docs.google.com/spreadsheets/d/19l2kSHdBKEWtIFX44FxLBdvCoKjy7VqPF4IW6C1xAZc/edit?usp=sharing).
#document
<html>
<body>
<div class="floater-footer" id="the-floater-footer">
<span id="myTestSpan"></span>
<div class="row">
<div class="col-md-1 col-sm-2 col-xs-3"><p>Newsletter</p></div>
<div class="col-md-8 col-sm-7 col-xs-9">
<form id="floater_footer" class="validate subscribe_form">
<div id="subscrive_group wow fadeInUp">
<!-- <input type="email" value="" name="EMAIL" class="form-control subscribe_mail" id="mce-EMAIL" placeholder="email address" required /> -->
<input type="text" class="form-control subscribe_mail" id="bar" name="bar" value="" placeholder="email address" required />
<!-- <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="subscr_btn subscribe_btn"> -->
<input type="submit" value="Subscribe" class="subscr_btn subscribe_btn" />
</div>
</form>
</div>
<div class="col-md-3 col-sm-3 hidden-xs">
<div class="pull-right">
<!-- social media icons here -->
</div>
</div>
</div>
</div>
<script type="text/javascipt">
jQuery( document ).ready(function( $ ) {
// variable to hold request
var request;
// bind to the submit event of our form
$("#floater_footer").submit(function(event){
// abort any pending request
if (request) {
request.abort();
}
// setup some local variables
var $form = $(this);
// let's select and cache all the fields
var $inputs = $form.find("input, select, button, textarea");
// serialize the data in the form
var serializedData = $form.serialize();
// let's disable the inputs for the duration of the ajax request
// Note: we disable elements AFTER the form data has been serialized.
// Disabled form elements will not be serialized.
$inputs.prop("disabled", true);
//$('#result').text('Sending data...');
// fire off the request to /form.php
request = $.ajax({
url: "https://script.google.com/macros/s/AKfycbyQIDmSInumcrNmU4zxIa4pV8tIlN3A9zx5L5o1hH4qNdP9nDw/exec",
type: "post",
data: serializedData
});
// callback handler that will be called on success
request.done(function (response, textStatus, jqXHR){
// log a message to the console
//$('#result').html('<a href="https://docs.google.com/spreadsheets/d/10tt64TiALYhPMqR2fh9JzkuhxW7oC0rXXPb_pmJ7HAY/edit?usp=sharing" target="_blank">Success - see Google Sheet</a>');
console.log("Hooray, it worked!");
});
// callback handler that will be called on failure
request.fail(function (jqXHR, textStatus, errorThrown){
// log the error to the console
console.error(
"The following error occured: "+
textStatus, errorThrown
);
});
// callback handler that will be called regardless
// if the request failed or succeeded
request.always(function () {
// reenable the inputs
$inputs.prop("disabled", false);
});
// prevent default posting of form
event.preventDefault();
});
});
</script>
</body>
</html>
对可能出现的问题有什么建议吗？与本网站上的大多数人相比，我在网络开发方面缺乏经验。所以我确定我缺少的是简单的东西！
我不完全明白为什么它会起作用，但是把脚本拿出来放在页面的头部 HTML 似乎起作用了！也许这是因为脚本出现在元素之后是一个问题，或者可能是 $(document).ready() 位于页面主要 HTML 内的 HTML 内导致了问题，或者可能是别的东西！不管是哪一种，下面的都解决了问题
在页面顶部 HTML 的代码顶部（但在声明 jQuery.js 文件之后），我放置了您已经看到的脚本，但进行了一些外观上的更改.如果我确实改变了一些我没有意识到的重要事情，我会把它放在这里。我还将展示我在脚本之前包含的两个 jQuery 文件：
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript">
//this is for writing the newsletter signup out to a spreadsheet for the floating footer
$( document ).ready(function( $ ) {
// variable to hold request
var request;
// bind to the submit event of our form
$("#floater_footer").submit(function(event){
// abort any pending request
if (request) {
request.abort();
}
// setup some local variables
var $form = $(this);
// let's select and cache all the fields
var $inputs = $form.find("input, select, button, textarea");
// serialize the data in the form
var serializedData = $form.serialize();
// let's disable the inputs for the duration of the ajax request
// Note: we disable elements AFTER the form data has been serialized.
// Disabled form elements will not be serialized.
$inputs.prop("disabled", true);
//$('#result').text('Sending data...');
if( $('#email1').val() == "Email Received!" ) {
//do nothing
//basically, they pressed the button again on accident
} else {
// fire off the request to the Google Sheet script
request = $.ajax({
url: "https://script.google.com/macros/s/AKfycbyQIDmSInumcrNmU4zxIa4pV8tIlN3A9zx5L5o1hH4qNdP9nDw/exec",
type: "post",
data: serializedData
});
}
// callback handler that will be called on success
request.done(function (response, textStatus, jqXHR){
// log a message to the console
//$('#result').html('<a href="https://docs.google.com/spreadsheets/d/10tt64TiALYhPMqR2fh9JzkuhxW7oC0rXXPb_pmJ7HAY/edit?usp=sharing" target="_blank">Success - see Google Sheet</a>');
$('#email1').val('Email Received!');
console.log("Newsletter signup complete!");
});
// callback handler that will be called on failure
request.fail(function (jqXHR, textStatus, errorThrown){
// log the error to the console
console.error(
"The following error occured: "+
textStatus, errorThrown
);
});
// callback handler that will be called regardless
// if the request failed or succeeded
request.always(function () {
// reenable the inputs
$inputs.prop("disabled", false);
});
// prevent default posting of form
event.preventDefault();
});
});
</script>
在 HTML 正文的更下方是放置我的页脚的代码：
#document
<html>
<body>
<div class="floater-footer" id="the-floater-footer">
<span id="myTestSpan"></span>
<div class="row">
<div class="col-md-1 col-sm-2 col-xs-3"><p>Newsletter</p></div>
<div class="col-md-8 col-sm-7 col-xs-9">
<form id="floater_footer" class="validate subscribe_form">
<div id="subscrive_group wow fadeInUp">
<input type="text" class="form-control subscribe_mail" id="email1" name="emailSignup" value="" placeholder="email address" required />
<input type="submit" value="Subscribe" class="subscr_btn subscribe_btn" />
</div>
</form>
</div>
<div class="col-md-3 col-sm-3 hidden-xs">
<div class="pull-right">
<!-- bunch of social media links/icons -->
</div>
</div>
</div>
</div>
</body>
</html>
希望这对以后遇到此问题的人有所帮助。您可能会看到我没有这样做的原因。
非常感谢 Jay Blanchard 让我质疑我的脚本是否会触发，这激发了我将脚本取出并放在其他地方的灵感！几乎可以肯定该脚本根本没有触发，并且是问题的根源。但为什么会这样，我不知道。但我希望这对其他人有帮助！
在你说这是重复之前，请听我说完。我遵循了这个答案 (jQuery Ajax POST example with PHP)，但我正在尝试将数据发送到 Google Sheet。我已经让代码在 Google Sheet 上运行，因为我可以通过 运行 我的代码直接从 sheet.
添加数据。但是，让它与我的网页一起使用显然是问题所在。尽管我已经遵循了我上面发布的问题的答案，但我认为这里还有更多的东西在起作用，这与我在这方面缺乏工作经验有关。
下面的代码是浮动页脚，包含在整个网页的代码中（其中 jquery-1.11.0.min.js 和 jquery-migrate-1.2.1.min.js 已经被调用了）。当我点击提交按钮时，页面看起来像是在处理请求，但 Google Sheet、Sheet1 (https://docs.google.com/spreadsheets/d/19l2kSHdBKEWtIFX44FxLBdvCoKjy7VqPF4IW6C1xAZc/edit?usp=sharing).
#document
<html>
<body>
<div class="floater-footer" id="the-floater-footer">
<span id="myTestSpan"></span>
<div class="row">
<div class="col-md-1 col-sm-2 col-xs-3"><p>Newsletter</p></div>
<div class="col-md-8 col-sm-7 col-xs-9">
<form id="floater_footer" class="validate subscribe_form">
<div id="subscrive_group wow fadeInUp">
<!-- <input type="email" value="" name="EMAIL" class="form-control subscribe_mail" id="mce-EMAIL" placeholder="email address" required /> -->
<input type="text" class="form-control subscribe_mail" id="bar" name="bar" value="" placeholder="email address" required />
<!-- <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="subscr_btn subscribe_btn"> -->
<input type="submit" value="Subscribe" class="subscr_btn subscribe_btn" />
</div>
</form>
</div>
<div class="col-md-3 col-sm-3 hidden-xs">
<div class="pull-right">
<!-- social media icons here -->
</div>
</div>
</div>
</div>
<script type="text/javascipt">
jQuery( document ).ready(function( $ ) {
// variable to hold request
var request;
// bind to the submit event of our form
$("#floater_footer").submit(function(event){
// abort any pending request
if (request) {
request.abort();
}
// setup some local variables
var $form = $(this);
// let's select and cache all the fields
var $inputs = $form.find("input, select, button, textarea");
// serialize the data in the form
var serializedData = $form.serialize();
// let's disable the inputs for the duration of the ajax request
// Note: we disable elements AFTER the form data has been serialized.
// Disabled form elements will not be serialized.
$inputs.prop("disabled", true);
//$('#result').text('Sending data...');
// fire off the request to /form.php
request = $.ajax({
url: "https://script.google.com/macros/s/AKfycbyQIDmSInumcrNmU4zxIa4pV8tIlN3A9zx5L5o1hH4qNdP9nDw/exec",
type: "post",
data: serializedData
});
// callback handler that will be called on success
request.done(function (response, textStatus, jqXHR){
// log a message to the console
//$('#result').html('<a href="https://docs.google.com/spreadsheets/d/10tt64TiALYhPMqR2fh9JzkuhxW7oC0rXXPb_pmJ7HAY/edit?usp=sharing" target="_blank">Success - see Google Sheet</a>');
console.log("Hooray, it worked!");
});
// callback handler that will be called on failure
request.fail(function (jqXHR, textStatus, errorThrown){
// log the error to the console
console.error(
"The following error occured: "+
textStatus, errorThrown
);
});
// callback handler that will be called regardless
// if the request failed or succeeded
request.always(function () {
// reenable the inputs
$inputs.prop("disabled", false);
});
// prevent default posting of form
event.preventDefault();
});
});
</script>
</body>
</html>
对可能出现的问题有什么建议吗？与本网站上的大多数人相比，我在网络开发方面缺乏经验。所以我确定我缺少的是简单的东西！
我不完全明白为什么它会起作用，但是把脚本拿出来放在页面的头部 HTML 似乎起作用了！也许这是因为脚本出现在元素之后是一个问题，或者可能是 $(document).ready() 位于页面主要 HTML 内的 HTML 内导致了问题，或者可能是别的东西！不管是哪一种，下面的都解决了问题
在页面顶部 HTML 的代码顶部（但在声明 jQuery.js 文件之后），我放置了您已经看到的脚本，但进行了一些外观上的更改.如果我确实改变了一些我没有意识到的重要事情，我会把它放在这里。我还将展示我在脚本之前包含的两个 jQuery 文件：
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript">
//this is for writing the newsletter signup out to a spreadsheet for the floating footer
$( document ).ready(function( $ ) {
// variable to hold request
var request;
// bind to the submit event of our form
$("#floater_footer").submit(function(event){
// abort any pending request
if (request) {
request.abort();
}
// setup some local variables
var $form = $(this);
// let's select and cache all the fields
var $inputs = $form.find("input, select, button, textarea");
// serialize the data in the form
var serializedData = $form.serialize();
// let's disable the inputs for the duration of the ajax request
// Note: we disable elements AFTER the form data has been serialized.
// Disabled form elements will not be serialized.
$inputs.prop("disabled", true);
//$('#result').text('Sending data...');
if( $('#email1').val() == "Email Received!" ) {
//do nothing
//basically, they pressed the button again on accident
} else {
// fire off the request to the Google Sheet script
request = $.ajax({
url: "https://script.google.com/macros/s/AKfycbyQIDmSInumcrNmU4zxIa4pV8tIlN3A9zx5L5o1hH4qNdP9nDw/exec",
type: "post",
data: serializedData
});
}
// callback handler that will be called on success
request.done(function (response, textStatus, jqXHR){
// log a message to the console
//$('#result').html('<a href="https://docs.google.com/spreadsheets/d/10tt64TiALYhPMqR2fh9JzkuhxW7oC0rXXPb_pmJ7HAY/edit?usp=sharing" target="_blank">Success - see Google Sheet</a>');
$('#email1').val('Email Received!');
console.log("Newsletter signup complete!");
});
// callback handler that will be called on failure
request.fail(function (jqXHR, textStatus, errorThrown){
// log the error to the console
console.error(
"The following error occured: "+
textStatus, errorThrown
);
});
// callback handler that will be called regardless
// if the request failed or succeeded
request.always(function () {
// reenable the inputs
$inputs.prop("disabled", false);
});
// prevent default posting of form
event.preventDefault();
});
});
</script>
在 HTML 正文的更下方是放置我的页脚的代码：
#document
<html>
<body>
<div class="floater-footer" id="the-floater-footer">
<span id="myTestSpan"></span>
<div class="row">
<div class="col-md-1 col-sm-2 col-xs-3"><p>Newsletter</p></div>
<div class="col-md-8 col-sm-7 col-xs-9">
<form id="floater_footer" class="validate subscribe_form">
<div id="subscrive_group wow fadeInUp">
<input type="text" class="form-control subscribe_mail" id="email1" name="emailSignup" value="" placeholder="email address" required />
<input type="submit" value="Subscribe" class="subscr_btn subscribe_btn" />
</div>
</form>
</div>
<div class="col-md-3 col-sm-3 hidden-xs">
<div class="pull-right">
<!-- bunch of social media links/icons -->
</div>
</div>
</div>
</div>
</body>
</html>
希望这对以后遇到此问题的人有所帮助。您可能会看到我没有这样做的原因。
非常感谢 Jay Blanchard 让我质疑我的脚本是否会触发，这激发了我将脚本取出并放在其他地方的灵感！几乎可以肯定该脚本根本没有触发，并且是问题的根源。但为什么会这样，我不知道。但我希望这对其他人有帮助！