Sending form using HTML5, Ajax and jQuery

Question

I need to send a form from HTML5-coded page using Ajax and jQuery. I don't know how to send parameters from a form to Ajax and jQuery correctly. How to send it correctly? My application must get the user's tweets(from tweet.com), user_id and tweets amound are parameters, which must be entered to the form.

<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title>(This is a title) Page example using HTML5</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <style type="text/css">
            header {
                border-style: dashed;
                border-width: 0 0 1px 0;
                margin-bottom: 20px;
                padding: 10px
            }
            header h2 {
                text-align: center;
            }
            #tweets article {
                margin-bottom: 20px;
            }
            #tweets article h1 img {
                float: left;
            }
            #tweets article h1 span {
                font-size: 14px;
                color: blue;
            }
            #tweets article details span {
                font-size: 12px;
                color: gray;
            }
        </style>
    </head>

    <body>
        <header>
             <h2>Page header</h2>

        </header>
        <!-- Control unit -->
        <nav></nav>
        <!-- Primary unit -->
        <section id="content">
            <!-- Control units -->
            <section id="controls"></section>
            <form id="tweetshow" method="post" action="" >
               <p>
               Enter user_id: <input type="text" name="user_id" />
               </p>
               <p>
               Enter user last tweets amount: <input type="text" name="last_tweets_amount" />
               </p>
               <p>
               From date: <input type="text" name="from_date" />
               </p>
               <p>
               To date: <input type="text" name="to_date" />
              </p>
               <p>
               <input type="button" value="Submit" onClick="AjaxFormRequest()"/>
               </p>
            </form>
            <!-- tweet units -->
            <section id="tweets"></section>
        </section>
        <footer>
            <p>Page bottom</p>
        </footer>

        <script type="text/javascript">

            //
            // Example AJAX-request executing to Twitter API
            //
            var params = {
                    include_entities: true,
                    include_rts: true,
                    screen_name: "some_user_id",
                    count: 3
                };

            function AjaxFormRequest(user_id, tweets_amount) 
            {
                params.screen_name = user_id;
                params.count = tweets_amount;

            }

            function ShowTweets()
            {
                $(document).ready(function() {                  

                    //Proxy entry point
                    var apiEndPoint = "http://localhost:8888/1.1/";

                    // Request parameters are here 
                    // https://dev.twitter.com/docs/api/1/get/statuses/user_timeline

                    // To execute async-request using jQuery
                    $.ajax({
                        // Full URL to source    
                        url: apiEndPoint + "statuses/user_timeline.json",

                        // HTTP-request type
                        type: "POST",

                        // Returned data type
                        dataType: "jsonp",

                        // Parameters
                        data: params,

                        // method if response has been successful
                        success: function (response) {
                            // look all response array
                            $.each(response, function (i, item) {
                                //console.dir(item);

                                // to wrap data into html and insert into #tweets section
                                var $header = $("<h1>")
                                    .append($("<img>", { src: item.user.profile_image_url}))
                                    .append($("<span>").html(item.user.name));

                                var $text = $("<p>").html(item.text);

                                var $details = $("<details>").append(
                                    $("<span>").html(item.created_at)
                                );

                                $("<article>", { id: item.id })
                                    .append($header, $text, $details)
                                    .appendTo("#tweets");
                            });
                        },

                        // method if response has not been successful
                        error: function (xhr, status, error) {
                            alert("An error is occured: " + status);
                        }
                });

                /*
                OR 
                we can use short method

                $.getJSON("https://api.twitter.com/1/statuses/user_timeline.json?callback=?", params, function(data) {
                    console.dir(data);
                })
                .error(function(xhr, status, error) {
                    console.log(xhr);
                });
                */
                });
            }

        </script>

    </body>


</html>

Answer 1

Set in your ajax call data as

data : $("#tweetshow").serialize();

Serialize() returns the form fields as a string in URL-encode notation.

Answer 2

you can either do what Barry said, also you can use

data: JSON.stringify(params)

in your Ajax call.

Sending form using HTML5, Ajax and jQuery

Question

2 answers

solution1
0 ACCPTED 2014-10-12 19:57:41

solution2
0 2014-10-12 20:02:34

Sending form using HTML5, Ajax and jQuery

Question

2 answers

solution1 0 ACCPTED 2014-10-12 19:57:41

solution2 0 2014-10-12 20:02:34

solution1
0 ACCPTED 2014-10-12 19:57:41

solution2
0 2014-10-12 20:02:34