php ajax表单提交而不刷新父页面

2023-11-22

我有一些关于 ajax 表单提交的问题

$("#send").on("click", function() {

$.ajax({
            type: "POST",
            url: "ads_process.php",
            data: $("#ads").serialize(),
            success: function(){
                if(data == "true") {
                    $("#ads").fadeOut("fast", function(){
                        //$(this).before("<p><strong>Success! Your message has been sent, thanks!</strong></p>");
                        setTimeout("$.ads.close()", 2000);
                        });
                    }
                }
            });
        });

页面有数据列表,有评论按钮,单击时会打开弹出窗口。我写评论并提交,但问题是父页面正在刷新我不想刷新父页面,我只想提交数据,插入数据库,弹出窗口将关闭 并且数据将显示在父页面上。

有谁能够帮助我

=================================================== =====================================

什么也没发生我发布了完整的代码::

HTML 文件::

<link rel="stylesheet" type="text/css" href="style.css" />

<script language="javascript" type="text/javascript" src="../js/jQuery_1-9-0.js"></script>
<script language="javascript" type="text/javascript" src="script.js"></script>

<a href="" class="topopup">popup</a>

<script language="javascript" type="text/javascript">
    $("#send").on("click", function() {

        events.preventDefault();
        $.ajax({
        type: "POST",
        url: "ads_process.php",
        data: $("#ads").serialize(),
        success: function(data){
            if(data == "true") {
                $("#ads").fadeOut("fast", function(){
                    //$(this).before("<p><strong>Success! Your message has been sent, thanks!</strong></p>");
                    setTimeout("$.ads.close()", 2000);
                    });
                }
            }
        });
    });
</script>

<div id="toPopup"> 

    <div class="close"></div>
    <span class="ecs_tooltip">Press Esc to close <span class="arrow"></span></span>
    <div id="popup_content"> <!--your content start-->
    <form action="" method="post" id="ads">

    <div class="formMainDiv">

        <div class="formDiv">

            <div class="lableHeading">
                Agent Name:
            </div>
            <div class="inputDiv">
                <input type="text" name="txtAgentName" id="txtAgentName" class="inputFeild" />
            </div>

        </div>

        <div class="formDiv">

            <div class="lableHeading">
                Ad ID:
            </div>
            <div class="inputDiv">
                <input type="text" name="txtAdsId" id="txtAdsId" class="inputFeild" />
            </div>

        </div>

        <div class="formDiv">

            <div class="lableHeading">
                Comments:
            </div>
            <div class="inputDiv">
                <textarea name="txtComments" id="txtComments" class="inputText"></textarea>
            </div>

        </div>

        <div class="formDiv">

            <div class="lableHeading">
                Call Reason:
            </div>
            <div class="inputDiv">
                <input type="radio" name="rdReason" id="rdReason" value="Not Responding at the moment" />
                <label class="lableText">
                    Not Responding at the moment&nbsp;&nbsp;
                </label>
                <input type="radio" name="rdReason" id="rdReason" value="Busy" />
                <label class="lableText">
                    Busy&nbsp;&nbsp;
                </label>
                <input type="radio" name="rdReason" id="rdReason" value="Call back" />
                <label class="lableText">
                    Call back&nbsp;&nbsp;
                </label>
            </div>

        </div>

        <div class="formDiv">

            <div class="lableHeading">
                Other Resaons:
            </div>
            <div class="inputDiv">
                <textarea name="txtOtherReason" id="txtOtherReason" class="inputText"></textarea>
            </div>

        </div>

        <div class="formDiv">

            <div class="lableHeading">
                Call Status:
            </div>
            <div class="inputDiv">
                <img src="/images/icon/green.png" />
                    <input name="rdFoneStatus" type="radio" value="1">&nbsp;&nbsp;&nbsp;
                <img src="/images/icon/red.png" />
                    <input name="rdFoneStatus" type="radio" value="2">&nbsp;&nbsp;&nbsp;
                <img src="/images/icon/gray.png" />
                    <input name="rdFoneStatus" type="radio" value="3">
            </div>

        </div>

        <div style="float:right; margin:18px 0 0">
            <button id="send" class="button">Submit</button>
        </div>

    </div>

    </form>
    </div> <!--your content end-->

</div> <!--toPopup end-->

<div class="loader"></div>
<div id="backgroundPopup"></div>

JS 文件::

/* 
    author: istockphp.com
*/
jQuery(function($) {

    $("a.topopup").click(function() {
            loading(); // loading
            setTimeout(function(){ // then show popup, deley in .5 second
                loadPopup(); // function show popup 
            }, 500); // .5 second
    return false;
    });

    /* event for close the popup */
    $("div.close").hover(
                    function() {
                        $('span.ecs_tooltip').show();
                    },
                    function () {
                        $('span.ecs_tooltip').hide();
                    }
                );

    $("div.close").click(function() {
        disablePopup();  // function close pop up
    });

    $(this).keyup(function(event) {
        if (event.which == 27) { // 27 is 'Ecs' in the keyboard
            disablePopup();  // function close pop up
        }   
    });

    $("div#backgroundPopup").click(function() {
        disablePopup();  // function close pop up
    });

    $('a.livebox').click(function() {
        alert('Hello World!');
    return false;
    });


     /************** start: functions. **************/
    function loading() {
        $("div.loader").show();  
    }
    function closeloading() {
        $("div.loader").fadeOut('normal');  
    }

    var popupStatus = 0; // set value

    function loadPopup() { 
        if(popupStatus == 0) { // if value is 0, show popup
            closeloading(); // fadeout loading
            $("#toPopup").fadeIn(0500); // fadein popup div
            $("#backgroundPopup").css("opacity", "0.7"); // css opacity, supports IE7, IE8
            $("#backgroundPopup").fadeIn(0001); 
            popupStatus = 1; // and set value to 1
        }   
    }

    function disablePopup() {
        if(popupStatus == 1) { // if value is 1, close popup
            $("#toPopup").fadeOut("normal");  
            $("#backgroundPopup").fadeOut("normal");  
            popupStatus = 0;  // and set value to 0
        }
    }
    /************** end: functions. **************/
}); // jQuery End

试试这个代码

$("#send").on("click", function(e) {
e.preventDefault();
$.ajax({
            type: "POST",
            url: "ads_process.php",
            //Specify the datatype of response if necessary
            data: $("#ads").serialize(),
            success: function(data){
                if(data == "true") {
                    $("#ads").fadeOut("fast", function(){
                        //$(this).before("<p><strong>Success! Your message has been sent, thanks!</strong></p>");
                        setTimeout("$.ads.close()", 2000);
                        });
                    }
                }
            });
        });
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

php ajax表单提交而不刷新父页面 的相关文章

  • Yii 使用 ajax 进行分页

    我需要使用ajax启用分页 我的代码 控制器 更新内容ajax function actionIndex dataProvider new CActiveDataProvider News array pagination gt array
  • jquery中文本区域自动调整大小

    我怎样才能做一个
  • Jquery:选择器找不到类?

    我正在尝试推进 Jquery autcomplete 功能 我希望 Jquery 自动完成在表中创建新行 到目前为止 这有效 但我希望 Jquery 添加一个删除按钮 因此用户可以删除他添加的项目之一 document ready func
  • 两个 OnClick 事件重叠

    我在元素内有一个元素 当我单击下面的元素时 我希望打开滑块 当我单击最外面的元素时 我希望滑块关闭 不幸的是 当我单击最外面的元素时 它也会单击下面的元素 有没有办法只单击最外面的元素而忽略下面元素的单击 这些事件在单击时触发并使用 Jav
  • jquery验证-等待远程检查完成

    当我打电话时 form valid 我连接了远程验证检查 一切正常 但是如果所有其他字段都有效 则表单会通过验证 因为远程检查没有 足够快 返回响应 有没有办法强制 jquery 验证等待任何远程检查完成或挂钩远程检查调用的完成事件 我目前
  • 从 thymeleaf 获取数据到模态引导程序、jquery

    我正在尝试获取模态视图的 id 这是为了更新 onclick 元素 但我找不到方法 知道如何为 boostrap 5 完成此操作 或我可以用其他方法吗 谢谢 tr a inactivate a div class modal fade mo
  • 选择变量的嵌套元素 - jQuery

    我希望将变量传递给函数并让函数选择该变量中的元素 我不熟悉这种情况的语法 但是有人可以建议吗 例如 当在容器内单击按钮时 我希望将该容器存储在变量中 好吧 我有那部分 但后来我希望选择该容器中的某个元素 例如 container div e
  • 如何同步两个文本框表单值?

    大家好 我是 jQuery 新手 假设我有两个 HTML 文本框 如何才能实现这样的情况 如果我在文本框 A 中写入 则相同的值会转到文本框 B 如果我在 B 中写入 则相同的值会转到 A 与删除文本相同 在 jQuery 中如何做到这一点
  • Rails 4 可安装引擎,找不到文件“jquery”

    我正在创建一个 Rails 可安装引擎插件 它使用 gem jquery rails 我在 gemspec 文件中添加了这段代码 s add dependency jquery rails gt 3 0 1 and run bundle i
  • 解析“流”JSON

    我在浏览器中有一个网格 我想通过 JSON 将数据行发送到网格 但浏览器应该在接收到 JSON 时不断解析它 并在解析时将行添加到网格中 换句话说 在接收到整个 JSON 对象后 不应将行全部添加到网格中 应该在接收到行时将其添加到网格中
  • 使用 jQuery/JS 打开时使
    标签的内容具有动画效果

    我只想要 HTML5 的内容details标记为 滑行 动画打开 而不是仅仅弹出打开 立即出现 这可以用 jQuery Javascript 实现吗 Fiddle http jsfiddle net 9h4Hq HTML
  • 在 Wordpress 站点中进行 AJAX 调用时出现问题

    我在使用 Wordpress 站点功能的 AJAX 部分时遇到了一些问题 该功能接受在表单上输入的邮政编码 使用 PHP 函数来查找邮政编码是否引用特定位置并返回到该位置的永久链接 我的第一个问题是关于我构建的表单 现在我的表单操作是空白的
  • jQuery 可以在用户输入数字时添加逗号吗?

    当用户输入数字时 如何动态添加逗号 有没有一个好的数字格式化程序可以提供帮助 我必须稍后添加这些数字 所以我最终必须删除一行中的逗号 但屏幕需要显示逗号以提高可读性 运行代码片段以查看其工作情况 input number keyup fun
  • 可以使用 jQuery 或 Javascript 将图片的特定部分用作链接吗?

    我有这个想法 将图片 而不是文本 的各个部分链接到不同的页面或网站 并且我想在不实际创建不同的照片并将它们彼此靠近的情况下完成 这样看起来就像是一张完整的图片 这里有人知道如何使用 JavaScript 的变体 例如 jQuery 或纯 J
  • jquery.validate 中是否有一个函数可以像重置表单一样重置单个字段?

    我想调用 jquery 函数来手动删除单个字段中的错误并重置错误标记 是否有一个函数可以执行此操作 类似于 resetForm 函数 您可以执行以下操作来验证单个字段 your field valid 也许它会对某人有所帮助 Thanks
  • 提交后禁用按钮

    当用户提交付款表单并且发布表单的代码导致 Firefox 中出现重复发布时 我试图禁用按钮 去掉代码就不会出现这个问题 在firefox以外的任何浏览器中也不会出现这个问题 知道如何防止双重帖子吗 System Text StringBui
  • 回发后刷新时提示确认表单重新提交。我做错了什么?

    我有一个以空白 默认状态启动的仪表板 我让用户能够将保存的状态加载到仪表板中 当他们单击 应用 按钮时 我运行以下代码 function CloseAndSave var radUpload find radUpload1ID var in
  • 如何在jquery中以相反的顺序迭代元素? [复制]

    这个问题在这里已经有答案了 我是jquery的新手 我想知道如何使用each 在jquery中以相反的顺序迭代表单元素 任何帮助 将不胜感激 尝试这个 input get reverse each function
  • fullCalendar 未显示正确的结束日期

    我正在看调试页面 http jsbin com wukofacaxu edit js outputFullCalendar 官方网站的 我想安排一个活动时间为 22 09 2015 至 30 09 2015 dd mm yyyy 但它只显示
  • 如何从图像输入中获取 xy 坐标?

    我有一个输入设置为图像类型

随机推荐

  • 如何向原型单元添加两个以上标签?

    我已经完成了下面的教程并且效果很好 我的问题是如何将两个以上的标准单元添加到原型单元中 http thedarkdev blogspot co uk 2013 09 web service apps in ios7 json with ht
  • 带时间间隔的 CSS 动画

    我想无限地旋转图形元素 但一步一步有一定的时间间隔 例如 旋转 90 度 平滑动画 然后 5 秒后再旋转 90 度 并无限重复相同的操作 仅使用CSS 可以完成此操作吗 这是我的JS BIN 很简单 以下代码将转换限制为关键帧40 60 整
  • 使用 TXMLDocument 构建 XML 文档时出现问题

    我是delphi新手 现在我必须阅读create an x ml 我的代码如下 function foo createXMLDocument TXMLDocument var res TXMLDocument rootNode IXMLNo
  • 快速更改 UImenu 的位置

    我想向我的应用程序添加一个 UIMenu 我正在练习它 现在有一个问题是否可以设置 UIMenu 的位置UIMenu比当前显示的按钮稍高一点 正如您在这张照片中看到的 菜单当前覆盖了选项卡栏 我想将其设置为比选项卡栏高一点 这是我的代码 l
  • 如何从 setuptools 安装程序 (setup.py) 中生成 python grpc 代码?

    我们在存储库中有一些 gRPC 的原型文件 我读到提交生成的代码并不好 所以我想我需要将生成作为软件包安装的一部分 例如 setuptools setup py 但是 要生成 gRPC 代码 您需要首先通过运行来安装包pip install
  • Spring Data 中的查询创建 - 动态 where 子句

    Spring data中有没有办法动态形成where子句 我想要做的是有一个方法 类似于 findBy get 方法 它使用上述非 NULL 属性运行 WHERE 和 AND 例如 Consider the object Person fi
  • SQL Server 分区 - 唯一索引错误

    我有一个按 TRANSACTION DATE TIME 分区的表 表有一列 ID 我想为分区方案上的 ID 创建一个唯一索引 如下所示 CREATE UNIQUE NONCLUSTERED INDEX IX ID ON PS DATETIM
  • 在 AngularJS 中拒绝带有多个参数的 Promise(如 $http)

    回调 httpPromise 有多个参数 主体 状态 标头 配置 我想手动创建类似的承诺 但不知道该怎么做 我想做的或多或少是 myservice action then function status message config 我知道
  • IIS7 劫持我的 Coldfusion 错误页面

    在我的异常处理文件中 我将状态代码设置为 404 然后渲染 n 个 HTML 页面 作为错误页面 想想失败鲸鱼
  • 同时安装 Visual Studio 2010 和 VS2008 会导致问题吗?

    这可能会导致什么样的问题 安装在虚拟机里更好吗 并行安装问题始终可能存在 您应该采取适当的保护措施 例如备份 使用虚拟机等 根据我个人的经验 它的效果很好 在我的 Tech Ed 演示中 我使用 Visual Studio 2005 200
  • 如何更改 Java 中 HTTP 响应中的字符集编码

    我必须从远程服务器获取一些 JSON 对象 为此我正在使用这个功能 它工作得很好 除了有时会获取一些奇怪的数据 我相信这是因为它使用 ASCII 字符集进行解码 请在下面找到我正在使用的方法 public HttpResponse call
  • Java 中的双向映射? [复制]

    这个问题在这里已经有答案了 我在 Java 中有一个简单的整数到字符串的映射 但我需要能够轻松地从整数检索字符串 以及从字符串检索整数 我尝试过 Map 但它只能从整数中检索字符串 这是一种方法 private static final M
  • 如何在 ASP.NET Core 中结合 FromBody 和 FromForm BindingSource?

    我创建了一个新的 ASP NET Core 2 1 API 项目 其中包含Datadto 类和此控制器操作 HttpPost public ActionResult
  • 如何获取对象属性的类型提示?

    我想获取对象属性的类型提示 我只能获得该类的提示 而不能获得该类的实例 我尝试过使用foo instance class from here但这只显示了类变量 那么在示例中我如何获得类型提示bar class foo var int 42
  • 在 Genymotion Android 中连接到 VPN

    我正在尝试在 Genymotion 虚拟设备中配置并连接到 VPN 我可以在虚拟设备中配置 VPN 连接 但无法连接 没有显示错误 我在我的 PC 和真实 Android 设备中使用了相同的设置 它在设备和 PC 中运行良好 我认为是 Vi
  • 在单个 RDS 文件中保存多个变量

    我想将变量列表传递给 saveRDS 以保存它们的值 但它会保存它们的名称 variables lt c A B C saveRDS variables file R 它保存单个向量 变量 我也尝试过 save variables file
  • 如何从文件中读取前 n 行和后 n 行?

    如何读取文件的前n行和后n行 For n 2 我读online that head n2 tail n2 会起作用 但事实并非如此 cat x 1 2 3 4 5 cat x head n2 tail n2 1 2 预期输出为n 2将会 1
  • 对多个条件使用 if else 语句

    样本数据 x lt runif 100 min 0 max 1 y lt runif 100 min 0 max 1 dif lt x y dat lt data frame x dif 我想要做的是在数据框中创建另一列dat called
  • 如何在容器内运行 kubectl 命令?

    在 pod 内的容器中 如何使用 kubectl 运行命令 例如 如果我需要在容器内执行类似的操作 kubectl 获取 Pod 我已经尝试过 在我的 dockerfile 中 我有以下命令 RUN curl LO https storag
  • php ajax表单提交而不刷新父页面

    我有一些关于 ajax 表单提交的问题 send on click function ajax type POST url ads process php data ads serialize success function if dat