javascript上的ajax请求不起作用_Javascript_Jquery_Ajax_Iframe_Bookmarklet

javascript上的ajax请求不起作用

javascript jquery ajax iframe

javascript上的ajax请求不起作用,javascript,jquery,ajax,iframe,bookmarklet,Javascript,Jquery,Ajax,Iframe,Bookmarklet,在这里，我使用iframe创建了一个表单我想使用ajax请求保存这些数据name和category。这是一个谷歌电子表格，我想在这里保存这些数据https://docs.google.com/spreadsheets/d/1WXzTVsIAKsGvXgm4ivRzTPN2P8kupJDcnH5sHdc0Vhw/edit?usp=sharing 我正在使用bookmarklet，所以这是它的一个脚本。当我这样做的时候，什么也做不了。没有错误和控制台日志？我不明白？请帮帮我，我是新手。我的代

在这里，我使用iframe创建了一个表单

我想使用ajax请求保存这些数据

name

和

category

。这是一个谷歌电子表格，我想在这里保存这些数据

https://docs.google.com/spreadsheets/d/1WXzTVsIAKsGvXgm4ivRzTPN2P8kupJDcnH5sHdc0Vhw/edit?usp=sharing

我正在使用bookmarklet，所以这是它的一个脚本。当我这样做的时候，什么也做不了。没有错误和控制台日志？我不明白？请帮帮我，我是新手。我的代码如下所示，该文件名为script.js：

(function(){
var f = '<form action="" method="post"> Name: <input type="text" id="name" name="name">Category <select name="category" id="category"><option value="first">First</option><option value="second">Second</option><option value="third">Third</option></select><br><input type="submit"></form>';
var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
iframe.contentWindow.document.open();
iframe.contentWindow.document.write(f);
iframe.contentWindow.document.close();

$("#submit").click(function(){
        var name = $('#name').val();
        var category = $('#category').val();
        console.log("po ajax" , name , category);
            $.ajax({
                url: "https://docs.google.com/spreadsheets/d/1WXzTVsIAKsGvXgm4ivRzTPN2P8kupJDcnH5sHdc0Vhw/edit?usp=sharing",
                data: { "name": name,"category": category},
                type: "POST",
                dataType: "xml",
                statusCode: {
                    0: function () {
                        // window.location.replace("ThankYou.html");
                        console.log("error");
                    },
                    200: function () {
                        // window.location.replace("ThankYou.html");
                        console.log("ok");
                    }
                }
            });
   });


})()

（函数（）{
变量f='名称：类别第一第二第三
'；
var iframe=document.createElement（'iframe'）；
document.body.appendChild（iframe）；
iframe.contentWindow.document.open（）；
iframe.contentWindow.document.write（f）；
iframe.contentWindow.document.close（）；
$（“#提交”）。单击（函数（）{
var name=$（'#name'）.val（）；
var category=$（'#category'）.val（）；
log（“po ajax”、名称、类别）；
$.ajax({
url:“https://docs.google.com/spreadsheets/d/1WXzTVsIAKsGvXgm4ivRzTPN2P8kupJDcnH5sHdc0Vhw/edit?usp=sharing",
数据：{“名称”：名称，“类别”：类别}，
类型：“POST”，
数据类型：“xml”，
状态代码：{
0:函数（）{
//window.location.replace（“ThankYou.html”）；
控制台日志（“错误”）；
},
200：函数（）{
//window.location.replace（“ThankYou.html”）；
控制台日志（“ok”）；
}
}
});
});
})()

编辑：

这是我定义bookmarklet的index.html页面：

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <title></title>
</head>
<body>
<p><a href="javascript:(function(){my_script=document.createElement('SCRIPT');my_script.type='text/javascript';my_script.src='script.js';document.getElementsByTagName('head')[0].appendChild(my_script);})();"> Bookmarklet</a></p>

</body>
</html>

您没有进行ajax调用，因为表单是以默认方式提交的，因此会在js函数之前重新加载页面。您需要通过更改

$（“#提交”）来阻止表单提交。单击（函数（）{

到

$（“#提交”）。单击（函数（e）{e.preventDefault（）············································································
当您在iframe中添加表单时，iframe中还应该包含用于绑定click event to submit按钮的javascript函数
由于您使用的是jquery，jquery引用也应该存在于iframe中。
您不能从父页面将事件绑定到iframe中的元素
当您在iframe中添加表单时，iframe中还应该包含用于绑定click event to submit按钮的javascript函数
因为您使用的是jquery，jquery引用也应该存在于iframe中。
Hmm。这里有很多问题

javascript代码与iframe内容是分开的（这是Sangram Parmar的答案）
我建议在测试中去掉iframe，只需将
代码块添加为原始html
jquery#submit
标识符不适合这种情况。我个人会添加一个嗯。这里有很多问题

javascript代码与iframe内容是分开的（这是Sangram Parmar的答案）
我建议在测试中去掉iframe，只需将
代码块添加为原始html
jquery#submit
标识符不适合这种情况。就个人而言，我想添加一个似乎您有3个不同的答案，您需要检查所有答案：DGoodness，但我在这里迷路了。为什么这首先是一个iframe？我知道这是一个人为的示例，但我不理解一个需要iframe或iframe的用例iframe的性能更好。基于本文，我创建了一个bookmarklet，还有InstaCalc bookmarklet示例。上面写着“打开/覆盖一个新页面。打开一个新页面或在当前页面上绘制一个窗口，如边栏”因此，我使用了iframe？这是一个错误的选择吗？@zipzitI我想我应该做一个独立的
，然后适当地设置它的样式。这样你的JavaScript和表单就会在同一个文档中。我想这意味着我支持@sangramparmar解决方案。谢谢你的回答@zipzit，但我对这方面是新手，我不明白？你能再解释一点吗？因为使用iframe是我找到的唯一解决方案？似乎你有3个不同的答案，你需要全部检查：DGoodness，但我在这里迷路了。为什么这首先是一个iframe？我知道这是一个人为的例子，但我不理解一个需要iframe或perform的用例我更喜欢iframe。基于这篇文章，我创建了一个bookmarklet，其中有InstaCalc bookmarklet示例。上面写着“打开/覆盖一个新页面。打开一个新页面或在当前页面上绘制一个窗口，如侧边栏”因此，我使用了iframe？这是一个错误的选择吗？@zipzitI我想我应该做一个独立的
，然后适当地设置它的样式。这样你的JavaScript和表单就会在同一个文档中。我想这意味着我支持@sangramparmar解决方案。谢谢你的回答@zipzit，但我对这方面是新手，我不明白？你能再解释一点吗？因为用iframe做是我找到的唯一解决方案。谢谢你的回答。我做了一个e