PHP的Ajax表单无刷新父页面提交表单、页面、PHP、Ajax

2023-09-10 17:27:43 作者：一击就碎的念头不是梦想

我有一些问题的Ajax表单提交

  $（＃发送）。在（点击，函数（）{

$阿贾克斯（{
            键入：POST，
            网址：ads_process.php
            数据：$（＃广告）序列化（）。
            成功：函数（）{
                如果（数据==真）{
                    $（＃广告）。淡出（快，函数（）{
                        ！//$(this).before("<p><strong>Success您的邮件已发送，谢谢＆LT; / STRONG＆GT;＆LT; / P＆gt;中）;
                        的setTimeout（，2000$ ads.close（）。）;
                        }）;
                    }
                }
            }）;
        }）;

页有数据列表有按钮对此事发表评论，当点击弹出窗口中打开。我写评论，并提交，但问题是，一个父页面刷新我不想刷新父页面只是我想提交数据，插入数据库和弹出式窗口将被关闭和数据都将显示在父页面。

任何机构可以帮助我

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

没有发生我发表我的完整code ::

HTML文件::

 ＆LT;链接相对=样式类型=文/ CSS的href =style.css文件/＆GT;

＆LT; SCRIPT LANGUAGE =JavaScript的类型=文/ JavaScript的SRC =../ JS / jQuery_1-9-0.js＆GT;＆LT; / SCRIPT＆GT;
＆LT; SCRIPT LANGUAGE =JavaScript的类型=文/ JavaScript的SRC =的script.js＆GT;＆LT; / SCRIPT＆GT;

＆所述; A HREF =类=topopup＆GT;弹出＆所述; / a取代;

＆LT; SCRIPT LANGUAGE =JavaScript的类型=文/ JavaScript的＆GT;
    $（＃发送）。在（点击，函数（）{

        事件preventDefault（）。
        $阿贾克斯（{
        键入：POST，
        网址：ads_process.php
        数据：$（＃广告）序列化（）。
        成功：功能（数据）{
            如果（数据==真）{
                $（＃广告）。淡出（快，函数（）{
                    ！//$(this).before("<p><strong>Success您的邮件已发送，谢谢＆LT; / STRONG＆GT;＆LT; / P＆gt;中）;
                    的setTimeout（，2000$ ads.close（）。）;
                    }）;
                }
            }
        }）;
    }）;
＆LT; / SCRIPT＆GT;

＆LT; DIV ID =toPopup＆GT;

    ＆LT; DIV CLASS =关闭＆GT;＆LT; / DIV＆GT;
    ＆LT;跨度类=ecs_tooltip＆GT; preSS Esc键关闭＆LT;跨度类=箭头＆GT;＆LT; / SPAN＆GT;＆LT; / SPAN＆GT;
    ＆LT; DIV ID =popup_content＆GT; ＆LT;！ - 您的内容开始 - ＆GT;
    ＆LT;形式的行动=的方法=后ID =广告＆GT;

    ＆LT; DIV CLASS =formMainDiv＆GT;

        ＆LT; DIV CLASS =formDiv＆GT;

            ＆LT; DIV CLASS =lableHeading＆GT;
                代理机构名称：
            ＆LT; / DIV＆GT;
            ＆LT; DIV CLASS =inputDiv＆GT;
                ＆LT;输入类型=文本名称=txtAgentNameID =txtAgentName级=inputFeild/＆GT;
            ＆LT; / DIV＆GT;

        ＆LT; / DIV＆GT;

        ＆LT; DIV CLASS =formDiv＆GT;

            ＆LT; DIV CLASS =lableHeading＆GT;
                广告ID：
            ＆LT; / DIV＆GT;
            ＆LT; DIV CLASS =inputDiv＆GT;
                ＆LT;输入类型=文本名称=txtAdsIdID =txtAdsId级=inputFeild/＆GT;
            ＆LT; / DIV＆GT;

        ＆LT; / DIV＆GT;

        ＆LT; DIV CLASS =formDiv＆GT;

            ＆LT; DIV CLASS =lableHeading＆GT;
                编辑点评：
            ＆LT; / DIV＆GT;
            ＆LT; DIV CLASS =inputDiv＆GT;
                ＆LT; textarea的名字=txtCommentsID =txtComments级=inputText的＆GT;＆LT; / textarea的＆GT;
            ＆LT; / DIV＆GT;

        ＆LT; / DIV＆GT;

        ＆LT; DIV CLASS =formDiv＆GT;

            ＆LT; DIV CLASS =lableHeading＆GT;
                呼叫原因：
            ＆LT; / DIV＆GT;
            ＆LT; DIV CLASS =inputDiv＆GT;
                ＆LT;输入类型=无线电名称=rdReasonID =rdReason值=不响应目前/＆GT;
                ＆LT;标签类=lableText＆GT;
                    无响应的时刻和放大器; NBSP;＆安培; NBSP;
                ＆LT; /标签＆gt;
                ＆LT;输入类型=无线电名称=rdReasonID =rdReason值=忙/＆GT;
                ＆LT;标签类=lableText＆GT;
                    忙放大器; NBSP;＆安培; NBSP;
                ＆LT; /标签＆gt;
                ＆LT;输入类型=无线电名称=rdReasonID =rdReason值=回拨/＆GT;
                ＆LT;标签类=lableText＆GT;
                    回拨和放大器; NBSP;＆安培; NBSP;
                ＆LT; /标签＆gt;
            ＆LT; / DIV＆GT;

        ＆LT; / DIV＆GT;

        ＆LT; DIV CLASS =formDiv＆GT;

            ＆LT; DIV CLASS =lableHeading＆GT;
                其他Resaons：
            ＆LT; / DIV＆GT;
            ＆LT; DIV CLASS =inputDiv＆GT;
                ＆LT; textarea的名字=txtOtherReasonID =txtOtherReason级=inputText的＆GT;＆LT; / textarea的＆GT;
            ＆LT; / DIV＆GT;

        ＆LT; / DIV＆GT;

        ＆LT; DIV CLASS =formDiv＆GT;

            ＆LT; DIV CLASS =lableHeading＆GT;
                通话状态：
            ＆LT; / DIV＆GT;
            ＆LT; DIV CLASS =inputDiv＆GT;
                ＆LT; IMG SRC =/图片/图标/ green.png/＆GT;
                    ＆LT;输入名称=rdFoneStatus类型=无线电值=1＆GT;＆安培; NBSP;＆安培; NBSP;＆安培; NBSP;
                ＆LT; IMG SRC =/图片/图标/ red.png/＆GT;
                    ＆LT;输入名称=rdFoneStatus类型=无线电值=2＆GT;＆安培; NBSP;＆安培; NBSP;＆安培; NBSP;
                ＆LT; IMG SRC =/图片/图标/ gray.png/＆GT;
                    ＆LT;输入名称=rdFoneStatus类型=电台的价值=3＆GT;
            ＆LT; / DIV＆GT;

        ＆LT; / DIV＆GT;

        ＆LT; DIV的风格=浮动：权利;保证金：18像素0 0＆GT;
            ＆LT;按钮ID =发送级=按钮＆GT;提交＆LT; /按钮＆GT;
        ＆LT; / DIV＆GT;

    ＆LT; / DIV＆GT;

    ＆LT; /形式GT;
    ＆LT; / DIV＆GT; ＆LT;！ - 您的内容结束 - ＆GT;

＆LT; / DIV＆GT; ＆LT;！ -  toPopup结束 - ＆GT;

＆LT; DIV CLASS =装载机＆GT;＆LT; / DIV＆GT;
＆LT; DIV ID =backgroundPopup＆GT;＆LT; / DIV＆GT;

JS文件::

  / *
    作者：istockphp.com
* /
jQuery的（功能（$）{

    $（a.topopup）。点击（函数（）{
            加载（）; //加载
            的setTimeout（函数（）{//然后以.5第二场演出弹出，deley
                loadPopup（）; //功能显示弹出
            }，500）; //0.5秒
    返回false;
    }）;

    / *事件关闭弹出* /
    $（div.close）。悬停（
                    功能（） {
                        $（'span.ecs_tooltip）显示（）。
                    }，
                    功能 （） {
                        $（'span.ecs_tooltip'）隐藏（）。
                    }
                ）;

    $（div.close）。点击（函数（）{
        disablePopup（）; //功能关闭弹出
    }）;

    $（本）.keyup（函数（事件）{
        如果（event.which == 27）{// 27是'精英'在键盘
            disablePopup（）; //功能关闭弹出
        }
    }）;

    $（＃DIV backgroundPopup）。点击（函数（）{
        disablePopup（）; //功能关闭弹出
    }）;

    $（'a.livebox）。点击（函数（）{
        警报（世界，你好！）;
    返回false;
    }）;


     / **************启动：功能。 ************** /
    功能加载（）{
        $（div.loader）显示（）。
    }
    功能closeloading（）{
        $（div.loader）淡出（正常）。
    }

    变种popupStatus = 0; //设定值

    功能loadPopup（）{
        如果（popupStatus == 0）{//如果为0，显示弹出
            closeloading（）; //淡出装
            $（＃toPopup）淡入（0500）。 //淡入弹出DIV
            $（＃backgroundPopup）的CSS（不透明度，0.7）。 // CSS透明度，支持IE7，IE8
            $（＃backgroundPopup）淡入（0001）。
            popupStatus = 1; //与设定值1
        }
    }

    功能disablePopup（）{
        如果（popupStatus == 1）{//如果值是1，关闭弹出窗口
            $（＃toPopup）淡出（正常）。
            $（＃backgroundPopup）淡出（正常）。
            popupStatus = 0; //并将值设为0
        }
    }
    / **************结束：功能。 ************** /
}）; // jQuery的结束

无刷新提交表单 php jquery ajax json的一个最简单实例 .pdf

解决方案

试试这个code

  $（＃发送）。在（点击，功能（五）{
即preventDefault（）;
$阿贾克斯（{
            键入：POST，
            网址：ads_process.php
            //指定反应，如果必要的数据类型
            数据：$（＃广告）序列化（）。
            成功：功能（数据）{
                如果（数据==真）{
                    $（＃广告）。淡出（快，函数（）{
                        ！//$(this).before("<p><strong>Success您的邮件已发送，谢谢＆LT; / STRONG＆GT;＆LT; / P＆gt;中）;
                        的setTimeout（，2000$ ads.close（）。）;
                        }）;
                    }
                }
            }）;
        }）;

i have some issues for ajax form submit

$("#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);
                        });
                    }
                }
            });
        });

a page have list of data there is button for comment, when it click a popup window open. i write comment and submit but the problem is that a parent page is refresh i dont want refresh a parent page only i want submit the data, insert in database and popup window will be closed and data will be shown on parent page.

can any body help me

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

Nothing Happen I Post my Complete Code::

HTML FILE ::

<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 File::

/* 
    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

解决方案

Try this code

$("#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);
                        });
                    }
                }
            });
        });

上一篇：传递大JSON对象到另一个网页在新窗口。新窗口、对象、网页、JSON

下一篇：阿贾克斯失败，但状态code仍然是200 QUOT;确定]仍然是、状态、阿贾克斯、code

相关推荐

精彩图集

精彩推荐

图片推荐

高秋曦失联事变女大弟子何以会遭杀人掩