dpqmu84646 2017-04-07 05:29
浏览 63
已采纳

如何以文本形式显示para或div中的ajax响应?

I have created one page with ajax function to insert data into the database so on click of submit the data is getting insert in the database but I want to show a message that data is inserted or not for that created div and showing result in that but I cant see the text.

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Post</title>

</head>
<body>

<form class="postForm" id="postForm" method="post" action="addPost.php">


    <fieldset>
        <legend>Please add the details below </legend>
        <p>
            <label for="title">Title (required, at least 2 characters)</label>
            <input id="title" name="title" minlength="2" type="text" required>
        </p>

        <p>
            <label for="url">URL (required)</label>
            <input id="url" type="url" name="url" required>
        </p>

        <p>
            <label for="desc">Description (required, at least 2 characters)</label>
            <input id="desc" name="desc" minlength="2" type="text" required>
        </p>

        <p>
            <label for="keywords">Keywords (eg:#facebook)(required, at least 2 characters)</label>
            <input id="keywords" name="keywords" minlength="2" type="text" required>
        </p>

        <p>

            <label for="urlType">Select Url Type :(required)</label>
            <select name="urlType" id="urlType">
                <option value="">Select Url Type...</option>
                <option value="0">Server Image</option>
                <option value="1">Server Video</option>
                <option value="2">YouTube Video</option>
                <option value="3">Vimeo Video</option>
                <option value="4">Facebook Image</option>
                <option value="5">Facebook Video</option>
                <option value="6">Instagram Image</option>
                <option value="7">Instagram Video</option>
                <option value="-1">Other</option>
            </select>
        </p>

        <p>


            <label for="postType"> Select Post Type :(required)</label>
            <select name="postType" id="postType">
                <option value="">Select Post Type...</option>
                <option value="0">Normal</option>
                <option value="1">Featured</option>
                <option value="2">Sponsored</option>

            </select>
        </p>
        <p>


            <label for="category"> Select Category :(required)</label>
            <select name="category" id="category">
                <option value="0">Select Category...</option>

            </select>
        </p>



        <p>
            <input type="hidden" name="action_type" id="action_type_id"/>
            <input type="hidden" name="id" id="p_id"/>
<!--            <a href="javascript:void(0);" class="btn btn-warning" onclick="$('#postForm').slideUp();">Cancel</a>
            <a href="javascript:void(0);" class="btn btn-success" onclick="userAction('add')">Add User</a>-->
           <input type="button" name="Submit" id="Submit" value="Submit" onclick="userAction('add')">


        </p>

    </fieldset>

    <div class="result"></div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>

        $(document).ready(function(){
            getCategories();
        });

        function getCategories() {

            $.ajax({
                type: "POST",
                url: 'getCategories.php',
                dataType: 'text',
                async: false,
                cache: false,
                success: function (result) {

                    $('#category').html(result);
                }
            });
        }
        function userAction(type,id){

            var statusArr = {add:"added",edit:"updated",delete:"deleted"};

            if (type == 'add') {
                $('#action_type_id').val(type);
                $('#p_id').val(id);
            }
            $.ajax({
                type: 'POST',
                url: 'addPost.php',
                data: $('#postForm').serialize(),
                success:function(report){

                    $(".result").html(data);

                    location.reload();
                }
            });
        }

    </script>
</form>

</body>
</html>

addPost.php

   <?php

include 'Database.php';
ini_set('display_errors', 1);
error_reporting(1);
ini_set('error_reporting', E_ALL);

if(isset($_POST['action_type']) && !empty($_POST['action_type'])) {

    if($_POST['action_type'] == 'add') {
         $database = new Database(Constants::DBHOST, Constants::DBUSER, Constants::DBPASS, Constants::DBNAME);
        $dbConnection = $database->getDB();
        $dbConnection->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

        $stmt = $dbConnection->prepare("insert into keywords(keyword) 
                                    values(?)");
        $stmt->execute(array($_POST['keywords']));


        //insert data into posts table
        $stmt = $dbConnection->prepare("insert into posts(category_id,title,url,url_type,description,keywords,post_type) 
                                    values(?,?,?,?,?,?,?)");
        $stmt->execute(array($_POST['category'], $_POST['title'], $_POST['url'], $_POST['urlType'], $_POST['desc'], $_POST['keywords'],$_POST['postType']));

        $count = $stmt->rowCount();

        if ($count > 0) {

            //if inserted


       //   echo    '<p id="report">Post Submitted</p>';
            echo "Post submitted.";
        } else {
            //if not inserted


        //  echo  '<p id="report">Post Submitted</p>';
       echo "Could not submit post.";
        }

    }

}

?> 

Please help.. Thank you.

  • 写回答

2条回答 默认 最新

  • duandou8457 2017-04-07 06:07
    关注

    Here is an updated segment of your code. Form reset code has been added.

    $.ajax({
        type: 'POST',
        url: 'addPost.php',
        data: $('#postForm').serialize(),
        success:function(report){
             // replace data to report
             $(".result").html(report);
    
             //reset form
             $(':input','#form') 
                .not(':button, :submit, :reset, :hidden') 
                .val('') 
                .removeAttr('checked') 
                .removeAttr('selected'); 
        }
    });
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥20 有关区间dp的问题求解
  • ¥15 多电路系统共用电源的串扰问题
  • ¥15 slam rangenet++配置
  • ¥15 有没有研究水声通信方面的帮我改俩matlab代码
  • ¥15 对于相关问题的求解与代码
  • ¥15 ubuntu子系统密码忘记
  • ¥15 信号傅里叶变换在matlab上遇到的小问题请求帮助
  • ¥15 保护模式-系统加载-段寄存器
  • ¥15 电脑桌面设定一个区域禁止鼠标操作
  • ¥15 求NPF226060磁芯的详细资料